bulma
bulma copied to clipboard
Unable to select to copy source code in an embedded Github gist
This is about Bulma.
Overview of the problem
This is about the Bulma CSS framework I'm using Bulma version 0.9.4. My browser is: Safari 17.0 (it's a beta, sue me). This is not a Sass/Scss issue, it plagues the CSS version as well. I am pretty sure this issue is not a duplicate.
Description
Unable to select to copy source code in an embedded Github gist
This is because embedded Gists and the resulting source code which features syntax highlighting reference the filename of the Gist file itself and use a plethora of classes. Unfortunately one of these classes is simply "file"
This is due to the .file class being extended unselectable in /sass/form/file.sass
.file
@extend %unelectable
Steps to Reproduce
- Create a web project
- Include the Sass/Scss version of Bulma
- Use the JavaScript widget code for Github Gists in your project, such as:
<script src="https://gist.github.com/f4f49495409d67d13884e4ab326837e4.js?file=aws-google-chart-example.js"> </script>
Expected behavior
I expect to be able to select source code in an embedded Github Gist widget to copy and paste into another application.
Actual behavior
I'm not able to select source code to highlight.
Here's a brief sample of some generated HTML code from the widget which references the file
class.
Even more interesting, whatever CSS framework Github Gists uses also use the class my-2
which conflicts as well, though not as much of a nuisance.
<div id="gist114581779" class="gist">
<div class="gist-file" translate="no">
<div class="gist-data">
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-aws-google-chart-example-js" class="file my-2"> <!-- THIS LINE RIGHT HERE -->
<div itemprop="text" class="Box-body p-0 blob-wrapper data type-javascript ">
<div class="js-check-bidi js-blob-code-container blob-code-content">
You can play with a Codepen showcasing the issue here:
https://codepen.io/dogtoe/pen/Poxrbdg