Render copy-to-clipboard text in element attribute [ci-skip]

Rendering copy-to-clipboard text in an invisible element causes
invisible extraneous matches when searching text on the page (e.g. with
Ctrl+F).  Rendering in an element attribute avoids this problem.
This commit is contained in:
Jonathan Hefner 2021-07-23 12:52:10 -05:00
parent fcacb93295
commit b78966b558
3 changed files with 3 additions and 17 deletions

View File

@ -194,7 +194,7 @@ body {
#topNav a, #footer a {
color: #F1938C;
}
}
}
@media screen and (max-width: 1024px) {
@ -257,12 +257,6 @@ body {
background: #ccc;
}
.clipboard-content {
opacity:0;
position:absolute;
z-index:-1;
}
#header {
background: #c52f24 url(../images/header_tile.gif) repeat-x;
color: #FFF;

View File

@ -253,12 +253,6 @@ body {
background: #ccc;
}
.clipboard-content {
opacity:0;
position:absolute;
z-index:-1;
}
#header {
background: #c52f24 url(../images/header_tile.gif) repeat-x;
color: #FFF;

View File

@ -14,12 +14,10 @@ module RailsGuides
formatter = Rouge::Formatters::HTML.new
lexer = ::Rouge::Lexer.find_fancy(lexer_language(language))
formatted_code = formatter.format(lexer.lex(code))
clipboard_id = "clipboard-#{SecureRandom.hex(16)}"
<<~HTML
<div class="code_container">
<pre><code class="highlight #{lexer_language(language)}">#{formatted_code}</code></pre>
<textarea class="clipboard-content" id="#{clipboard_id}">#{clipboard_content(code, language)}</textarea>
<button class="clipboard-button" data-clipboard-target="##{clipboard_id}">Copy</button>
<button class="clipboard-button" data-clipboard-text="#{clipboard_content(code, language)}">Copy</button>
</div>
HTML
end
@ -95,7 +93,7 @@ module RailsGuides
code = code.lines.grep(prompt_regexp).join.gsub(prompt_regexp, "")
end
ERB::Util.h(code)
ERB::Util.html_escape(code)
end
def convert_notes(body)