Hover on Codeblock Div
Closed this issue · 11 comments
When using the header, there is a new parentdiv (which actually has a typo in the class when collapsed: .codeblock-customizer-coedeblock-collapsed - should be codeblock not coedblock). It would be great if hovering over this div would apply a hover state to the pre element because it would then allow seamless hovering of the codeblock to trigger hover elements appleid to css or via js from other plugins/styles.
This behaviour would also ideally not occur when the codeblock is colllapsed.
I don't understand what you want here?
The obsidian app adds a button to copy code from the codeblock which only appears on hover of the codeblock. Similarly the execute code plugin adds buttons to both run code and clear output. These buttons appear when the pre.language- html element has the :hover pseudoclass.
What this currently means is when you hover over the header which shows the language name/file name/language icon, these buttons do not appear. This feels weird because when you put the cursor between the header and the code below the buttons flash in and out. Furthermore, I have styled the header to appear as part of the rounded codeblock and thus this makes the buttons appearing only partway down the codeblock even weirder.
When a header is added, the div containing this pre element gets a new child - the div.codeblock-customizer-header-wrapper element.
<div class="..." ...
<pre ...
to
<div class="codeblock-customizer-codeBlockPreElement-parent ..." ...
<div class="codeblock-customizer-header-wrapper ..." ...
<pre ...
Previously the div only has the pre as a child so hovering over the div sets :hover on the pre. However, now you could be hovering on the inner div and thus not get the hover reaction of hovering on the code. I would like the plugin to recognise that this inner div has been added and if the outer div is hovered on, the :hover pseudoclass should be applied to the inner pre element.
Sorry if this is slightly convoluted, I understand if you're not interested in implementing this but I think it would make it much nicer to integrate with the execute code plugin and the inbuilt copy button.
I've attached some pictures showing the difference when the code is inside the header vs inside the code:
Inside header:
Inside code:
Oh and what I meant for the hovering bit is that when the codeblock is folded closed, (so the outer div has the class codeblock-customizer-coedeblock-collapsed) this hover behaviour shouldn't trigger as the codeblock wouldn't be visible (though if it did still work, it presumably wouldn't be a breaking issue).
The final note was that the class codeblock-customizer-coedeblock-collapsed applied when a codeblock is folded is spelt incorrectly at the second codeblock.
Ok, now I understand. I can do that, no problem. Did you apply some custom.css? If yes, post it here please, so I can test it properly. I noticed the typo as well. It is fixed in the upcoming release.
Note: Styling might change a little, because there are some problems with some themes, which change the appearance of the rendered code block.
No worries about style changes, happy to temp fix those on my end.
I did apply some custom css but it's quite long and currently a bit convoluted (waiting to clean it up and make it work better with your plugin). I've attached the main gist that turns the header into part of the codeblock appearance-wise. This css works to give the intended code folding in reading mode (note that the language name and logo are temporarily disabled). I've also attached screenshots below:
Hover on code
Hover on title
Collapsed (with hover on title I guess)
Code:
```python file:test
hi
```:root {
--code-line-height: 24px;
--block-border-radius: 15px;
--collapsed-bottom-radius: 0px;
--collapsed-bottom-padding: 5px;
--clipboard-svg-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' opacity='0.6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-clipboard-copy'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'%3E%3C/rect%3E%3Cpath d='M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'%3E%3C/path%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v4'%3E%3C/path%3E%3Cpath d='M21 14H11'%3E%3C/path%3E%3Cpath d='m15 10-4 4 4 4'%3E%3C/path%3E%3C/svg%3E");
--clipboard-hover-svg-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' opacity='1' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-clipboard-copy'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'%3E%3C/rect%3E%3Cpath d='M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'%3E%3C/path%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v4'%3E%3C/path%3E%3Cpath d='M21 14H11'%3E%3C/path%3E%3Cpath d='m15 10-4 4 4 4'%3E%3C/path%3E%3C/svg%3E");
--clipboard-success-svg-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-clipboard-check'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'%3E%3C/rect%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Cpath d='m9 14 2 2 4-4'%3E%3C/path%3E%3C/svg%3E");
}
.theme-light {--block-margin-color: var(--code-background);}
.theme-dark {--block-margin-color: var(--code-background);}
.codeblock-customizer-icon-container,
.codeblock-customizer-header-language-tag {
display: none !important;
}
/* Code Header */
.codeblock-customizer-header-container {
background-color: unset !important;
border: none !important;
}
.codeblock-customizer-header-wrapper {
border-top-left-radius: var(--block-border-radius) !important;
border-top-right-radius: var(--block-border-radius) !important;
border-bottom-left-radius: var(--collapsed-bottom-radius) !important;
border-bottom-right-radius: var(--collapsed-bottom-radius) !important;
height: var(--code-line-height) !important;
padding-bottom: var(--collapsed-bottom-padding) !important;
}
.codeblock-customizer-codeBlockPreElement-parent:has( .codeblock-customizer-coedeblock-collapsed) {
--collapsed-bottom-radius: var(--block-border-radius);
--collapsed-bottom-padding: calc(6px + var(--code-line-height));
}
.markdown-rendered .codeblock-customizer-codeBlockPreElement-parent pre[class*='language-']{
padding-top: 0px !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
}
.markdown-rendered .codeblock-customizer-codeBlockPreElement-parent pre[class*='language-'] .copy-code-button {
top: calc(-1 * var(--code-line-height) - 2px) !important;
}
.codeblock-customizer-gutter,
.codeblock-customizer-RVline-number {
background-color: #00000000 !important;
}
.codeblock-customizer-RVline-number {margin-top: 3px !important;}
/* Coloured Border */
.markdown-rendered pre,
.codeblock-customizer-header-wrapper {
background: linear-gradient(var(--code-background),var(--code-background)) 4px bottom/100% border-box no-repeat,var(--block-margin-color) !important;
}
/* Extend height of preview codeblocks */
.markdown-rendered pre {
border-radius: var(--block-border-radius) !important;
padding: var(--code-line-height) 4px !important;
padding-left: 0px !important;
}
.markdown-rendered .codeblock-customizer-codeBlockPreElement-parent > pre {
overflow: visible;
}
.markdown-rendered pre code {
padding: 0 !important;
}
.codeblock-customizer-pre-radius {
border-radius: var(--block-border-radius) !important;
}
/* Copy code button */
.markdown-rendered pre .copy-code-button {
visibility: hidden !important;
float: right;
margin: 6px 6px 0px 0px;
padding: 2px 8px 0px 0px;
}
pre .copy-code-button:after {
content: var(--clipboard-svg-url) !important;
visibility: visible;
}
pre .copy-code-button:hover:after {
content: var(--clipboard-hover-svg-url) !important;
}
pre .copy-code-button:active:after {
content: var(--clipboard-success-svg-url) !important;
}If you need anything else, please let me know!
No, I think, that will be enough, to reproduce and test it. I will reply if I have an update or question.
Do you have any idea at all on how to do this. From some cursory research it appears that it may not be possible.
The only way I can see this working is by moving the header inside the pre. I think this is very doable (after the next version is released) but would require some css changes (the javascript changes are very basic).
To reiterate the benefits of doing this, if you work with the execute code plugin, the buttons for run and clear do not come up unless you move the cursor from the header down into the codeblock body which is jarring and weird behaviour. Changing this would allow those to come up when hovering on the header as well. Similarly the codeblock copy button in reading mode doesn't come up when you hover on the header. The benefit of this change would be that we could move the copy button into the header as well so the copy button would be out of the way of the code.
What do you think @mugiwara85?
Yeah, we can do that, but first this PR :)