markdown: add copy button to code blocks to copy source text

src/resources/common.css

@@ -208,3 +208,40 @@ span.modal-close:focus {
     content: attr(data-anchor-icon);
 }
 /* Anchor */
+
+/* Button */
+.vnote-btn {
+    position: relative;
+    display: inline-block;
+    padding: 6px 12px;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 20px;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    border: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-appearance: none;
+}
+
+.vnote-copy-clipboard-btn {
+    transition: opacity .3s ease-in-out;
+    opacity: 0;
+    padding: 2px 6px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+}
+
+pre:hover .vnote-copy-clipboard-btn {
+    opacity: 1;
+}
+
+pre.vnote-snippet {
+    position: relative;
+}
+/* Button */

src/resources/hoedown.js

@@ -91,6 +91,7 @@ var updateHtml = function(html) {
     }
 
     addClassToCodeBlock();
+    addCopyButtonToCodeBlock();
     renderCodeBlockLineNumber();
 
     // If you add new logics after handling MathJax, please pay attention to

src/resources/markdown-it.js

@@ -175,6 +175,7 @@ var updateText = function(text) {
     renderPlantUML('lang-puml');
     renderGraphviz('lang-dot');
     addClassToCodeBlock();
+    addCopyButtonToCodeBlock();
     renderCodeBlockLineNumber();
 
     // If you add new logics after handling MathJax, please pay attention to

src/resources/markdown_template.html

@@ -27,6 +27,7 @@
     <link rel="stylesheet" type="text/css" href="HIGHLIGHTJS_CSS_PLACE_HOLDER">
     <script src="qrc:/resources/qwebchannel.js"></script>
     <script src="qrc:/utils/highlightjs/highlight.pack.js"></script>
+    <script src="qrc:/utils/clipboard.js/clipboard.min.js"></script>
     <!-- EXTRA_PLACE_HOLDER -->
     <script src="JS_PLACE_HOLDER" defer></script>
     <script src="qrc:/resources/common.js" defer></script>

src/resources/markdown_template.js

@@ -23,6 +23,8 @@ var VPlantUMLDivClass = 'plantuml-diagram';
 var VMetaDataCodeClass = 'markdown-metadata';
 var VMarkRectDivClass = 'mark-rect';
 
+var hljsClass = 'hljs';
+
 var VPreviewMode = false;
 
 if (typeof VEnableMermaid == 'undefined') {
@@ -272,6 +274,10 @@ window.onwheel = function(e) {
 
 var skipScrollCheckRange = null;
 
+window.addEventListener('load', function() {
+    new ClipboardJS('.vnote-copy-clipboard-btn');
+});
+
 window.onscroll = function() {
     if (g_muteScroll) {
         return;
@@ -1247,7 +1253,6 @@ var renderCodeBlockLineNumber = function() {
 };
 
 var addClassToCodeBlock = function() {
-    var hljsClass = 'hljs';
     var codes = document.getElementsByTagName('code');
     for (var i = 0; i < codes.length; ++i) {
         var code = codes[i];
@@ -1267,6 +1272,23 @@ var addClassToCodeBlock = function() {
     }
 };
 
+var addCopyButtonToCodeBlock = function() {
+    var codes = document.getElementsByClassName(hljsClass);
+    for (var i = 0; i < codes.length; ++i) {
+        var code = codes[i];
+        var pare = code.parentElement;
+        pare.classList.add('vnote-snippet');
+
+        var btn = document.createElement('button');
+        btn.innerHTML = '&#x1f4cb;';
+        btn.classList.add('vnote-btn');
+        btn.classList.add('vnote-copy-clipboard-btn');
+        btn.setAttribute('type', 'button');
+        btn.setAttribute('data-clipboard-text', code.textContent);
+        code.insertAdjacentElement('beforebegin', btn);
+    }
+};
+
 var listContainsRegex = function(strs, exp) {
     for (var i = 0, len = strs.length; i < len; ++i) {
         if (exp.test(strs[i])) {

src/resources/marked.js

@@ -71,6 +71,7 @@ var updateText = function(text) {
     renderPlantUML('language-puml');
     renderGraphviz('language-dot');
     addClassToCodeBlock();
+    addCopyButtonToCodeBlock();
     renderCodeBlockLineNumber();
 
     // If you add new logics after handling MathJax, please pay attention to

src/resources/showdown.js

@@ -126,6 +126,7 @@ var updateText = function(text) {
     renderPlantUML('language-puml');
     renderGraphviz('language-dot');
     addClassToCodeBlock();
+    addCopyButtonToCodeBlock();
     renderCodeBlockLineNumber();
 
     // If you add new logics after handling MathJax, please pay attention to

src/utils/clipboard.js/README.md

@@ -0,0 +1,2 @@
+# [clipboard.js](https://github.com/zenorocha/clipboard.js)
+v2.0.4

src/utils/vutils.cpp

@@ -943,6 +943,18 @@ with 2em, if there are Chinese characters in it, the font will be a mess.
         extra += QString("<script type=\"text/javascript\">\n%1\n</script>\n").arg(js);
     }
 
+    // Clipboard.js.
+    {
+    const QString clipboardjs(":/utils/clipboard.js/clipboard.min.js");
+    QString js = VUtils::readFileFromDisk(clipboardjs);
+    extra += QString("<script type=\"text/javascript\">\n%1\n</script>\n").arg(js);
+    extra += "<script type=\"text/javascript\">"
+                 "window.addEventListener('load', function() {"
+                     "new ClipboardJS('.vnote-copy-clipboard-btn');"
+                 "});"
+             "</script>\n";
+    }
+
     if (!extra.isEmpty()) {
         templ.replace(HtmlHolder::c_extraHolder, extra);
     }

src/vnote.qrc

@@ -287,5 +287,6 @@
         <file>resources/icons/table.svg</file>
         <file>utils/wavedrom/wavedrom.min.js</file>
         <file>utils/wavedrom/wavedrom-theme.js</file>
+        <file>utils/clipboard.js/clipboard.min.js</file>
     </qresource>
 </RCC>