Add copy to clipboard button for code snippets #1454

abhishalya · 2020-10-27T12:40:45Z

Preview:

fredrikekre · 2020-10-27T13:25:51Z

Nice!

Is it possible to get actual newlines instead of the character \n somehow? This is what I get after copying a codeblock with

1 + 1
2 + 2

julia> 1 + 1\n2 + 2

abhishalya · 2020-10-27T13:45:57Z

Yeah, I'm trying to figure out a way to do it. Is there anything we can do from Julia side? The other option would be to handle via javascript.

fredrikekre · 2020-10-27T13:56:43Z

If you generate

<button class="copy-button button fas fa-copy" data-clipboard-text="1 + 1
2 + 2"></button>

instead of

<button class="copy-button button fas fa-copy" data-clipboard-text="1 + 1\n2 + 2"></button>

it seems to work.

fredrikekre · 2020-10-27T14:08:57Z

It would also be nice to strip # output from the text in e.g.

```jldoctest
1 + 1
2 + 2

# output

4
```

mortenpi · 2020-10-28T08:09:31Z

For the newlines, I think we should modify the HTML generation in DOM so that newlines in attributes are replaced by 
. That way we don't get any weird indentation problems.

It would also be nice to strip # output from the text in e.g.

As long as we render it as a single <pre> block, I think I would find it surprising if the copy-to-clipboard doesn't copy the content exactly.

mortenpi · 2020-10-28T08:10:43Z

src/Writers/HTMLWriter.jl

    language = Utilities.codelang(c.language)
    language = isempty(language) ? "none" : language
-    pre(code[".language-$(language)"](c.code))
+    code_block = [
+        button[".copy-button .button .fas .fa-copy", Symbol("data-clipboard-text")=>c.code],


Might be nice to have a title attribute on each button as well that would probably say "Copy to clipboard".

fredrikekre · 2020-10-28T08:12:47Z

As long as we render it as a single <pre> block, I think I would find it surprising if the copy-to-clipboard doesn't copy the content exactly.

Valid point, but it kind of defeats the purpose of having the button if the result is not pasteable into a Julia REPL? But perhaps it would be nice to render as two blocks instead, the #output in the final html is not very nice.

mortenpi · 2020-10-28T08:25:28Z

But perhaps it would be nice to render as two blocks instead, the #output in the final html is not very nice.

I think that's worth considering (#1455), but let's leave it for a separate PR.

fredrikekre · 2020-10-28T08:27:01Z

It would be nice to also show Copied! or similar when you click the button, see e.g. the copy-buttons on https://doc.rust-lang.org/book/ch01-02-hello-world.html

mortenpi

Just a bunch of bikeshedding thoughts:

I think an arrow-pointing-to-clipboard icon (e.g. like they use on the clipboard.js website) would be better, but I couldn't actually find one in FontAwesome, so we can probably stick with the current one.
We could make the button hide itself if you're not hovering over the <pre> box (like we do with the "Source" links on docstrings), so it would not distract when not necessary.
How hard do you think would it be to make the "Copied" text appear next to the button (e.g. in a bubble, like on the clipboard.js site), as opposed to replacing the icon inside the button? It's just the button changing size does not look the prettiest in my opinion.

mortenpi · 2020-10-31T04:23:02Z

assets/html/scss/documenter/components/_clipboard.scss

@@ -0,0 +1,3 @@
+.copy-button {
+  float: right;


This should make sure that it's the same distance from top and right side of the box:

Suggested change

float: right;

float: right;

top: -0.2rem;

assets/html/scss/documenter/components/_clipboard.scss

mortenpi · 2020-10-31T04:36:28Z

Oh, one more thing, would you mind adding an entry into the CHANGELOG.md file as well about this PR?

mortenpi · 2020-10-31T04:41:24Z

src/Utilities/DOM.jl

+    end
+    if occursin("\n", text)
+        replace(text, "\n"=>"&#10;")


This should go into the if/for above. Currently it's actually breaking the escaping (the top if never returns from the function).

Yeah, I realised that. The problem here though is that if I replace it there, the code block doesn't render properly. I believe highlight.js needs those "/n"

Right. Should be okay if we only escape \n-s in attributes? I think we could implement that by adding a keyword argument to escapehtml and toggling that wherever we're escaping the attribute contents?

abhishalya · 2020-11-02T17:48:25Z

@mortenpi Have a look at this once you're free, I've tried to address as many comments as I could. Do let me know what you think about this :)

mortenpi

This is looking really good!

Just one more CSS gripe: it looks like the "Copied" message box ends up being inside the <pre> box, so it's (1) partly cut off, and (2) creates a scrollbar on the code block when it appears:

assets/html/scss/documenter/components/_clipboard.scss

src/Utilities/DOM.jl

CHANGELOG.md

mortenpi

@abhishalya I'm really sorry for not reviewing earlier -- I completely missed that you updated the PR.

Besides the escaping thing, the only other issue I can still see is the "Copied" message creating scrollbars, instead of being of above everything. I tried to find a way around it, but I could quite figure it out. It feels like the solution in this post might be applicable.

mortenpi · 2020-12-01T22:59:34Z

src/Utilities/DOM.jl

@@ -281,7 +281,7 @@ When no escaping is needed then the same object is returned, otherwise a new
 string is constructed with the characters escaped. The returned object should
 always be treated as an immutable copy and compared using `==` rather than `===`.
 """
-function escapehtml(text::AbstractString)
+function escapehtml(text::AbstractString; escape_newlines=false)
    if occursin(r"[<>&'\"]", text)


I think we need to do something like this

Suggested change

if occursin(r"[<>&'\"]", text)

if occursin(r"[<>&'\"\\n]", text)

because it currently doesn't escape newlines if there are not other special characters:

julia> Documenter.Utilities.DOM.escapehtml("xyz\nAAA", escape_newlines=true) "xyz\nAAA"

And I think we could avoid the separate if, and just add another char === '\n' into the for loop below?

abhishalya force-pushed the abhishalya/clipboard_copy branch 4 times, most recently from d214bbf to f28bdb3 Compare October 27, 2020 13:03

mortenpi added this to the 0.26.0 milestone Oct 28, 2020

mortenpi added Format: HTML Related to the default HTML output Type: Enhancement labels Oct 28, 2020

mortenpi reviewed Oct 28, 2020

View reviewed changes

abhishalya force-pushed the abhishalya/clipboard_copy branch 4 times, most recently from 694c73e to 6cae6cd Compare October 29, 2020 14:56

mortenpi reviewed Oct 31, 2020

View reviewed changes

mortenpi reviewed Nov 7, 2020

View reviewed changes

abhishalya added 5 commits November 12, 2020 19:00

Add copy to clipboard button for code snippets

9542937

Add feedback to denote the content has been copied

d81f102

Compile scss with DocumenterTools

ecf2a11

Fix newline character issue

0b1d78b

Modify styles for button and add argument to fix newline issue

b4861f7

Replace newline character for every attribute value

5d4ef78

abhishalya force-pushed the abhishalya/clipboard_copy branch from d0fd30c to 5d4ef78 Compare November 12, 2020 13:35

mortenpi reviewed Dec 1, 2020

View reviewed changes

mortenpi modified the milestones: 0.26.0, 0.27.0 Dec 8, 2020

mortenpi modified the milestones: 0.27.0, 0.28.0 Jun 9, 2021

fredrikekre mentioned this pull request Jul 12, 2021

Add ability to copy code from snippets #1644

Closed

fredrikekre mentioned this pull request Jan 12, 2022

Copy button for code blocks #1748

Merged

fredrikekre closed this in 17ef40a Jan 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add copy to clipboard button for code snippets #1454

Add copy to clipboard button for code snippets #1454

abhishalya commented Oct 27, 2020 •

edited

Loading

fredrikekre commented Oct 27, 2020

abhishalya commented Oct 27, 2020

fredrikekre commented Oct 27, 2020

fredrikekre commented Oct 27, 2020

mortenpi commented Oct 28, 2020

mortenpi Oct 28, 2020

fredrikekre commented Oct 28, 2020 •

edited

Loading

mortenpi commented Oct 28, 2020

fredrikekre commented Oct 28, 2020

mortenpi left a comment

mortenpi Oct 31, 2020

mortenpi commented Oct 31, 2020

mortenpi Oct 31, 2020

abhishalya Oct 31, 2020

mortenpi Oct 31, 2020

abhishalya commented Nov 2, 2020

mortenpi left a comment

mortenpi left a comment

mortenpi Dec 1, 2020 •

edited

Loading

	if occursin(r"[<>&'\"]", text)
	if occursin(r"[<>&'\"\\n]", text)

Add copy to clipboard button for code snippets #1454

Add copy to clipboard button for code snippets #1454

Conversation

abhishalya commented Oct 27, 2020 • edited Loading

fredrikekre commented Oct 27, 2020

abhishalya commented Oct 27, 2020

fredrikekre commented Oct 27, 2020

fredrikekre commented Oct 27, 2020

mortenpi commented Oct 28, 2020

mortenpi Oct 28, 2020

Choose a reason for hiding this comment

fredrikekre commented Oct 28, 2020 • edited Loading

mortenpi commented Oct 28, 2020

fredrikekre commented Oct 28, 2020

mortenpi left a comment

Choose a reason for hiding this comment

mortenpi Oct 31, 2020

Choose a reason for hiding this comment

mortenpi commented Oct 31, 2020

mortenpi Oct 31, 2020

Choose a reason for hiding this comment

abhishalya Oct 31, 2020

Choose a reason for hiding this comment

mortenpi Oct 31, 2020

Choose a reason for hiding this comment

abhishalya commented Nov 2, 2020

mortenpi left a comment

Choose a reason for hiding this comment

mortenpi left a comment

Choose a reason for hiding this comment

mortenpi Dec 1, 2020 • edited Loading

Choose a reason for hiding this comment

abhishalya commented Oct 27, 2020 •

edited

Loading

fredrikekre commented Oct 28, 2020 •

edited

Loading

mortenpi Dec 1, 2020 •

edited

Loading