feat: support code copy (#901)

* feat: support code copy

* update

web/src/components/Memo.tsx

@@ -143,6 +143,9 @@ const Memo: React.FC<Props> = (props: Props) => {
       if (imgUrl) {
         showPreviewImageDialog([imgUrl], 0);
       }
+    } else if (targetEl.tagName === "BUTTON" && targetEl.className === "codeblock-copy-btn") {
+      copy(targetEl.parentElement?.children[1].textContent ?? "");
+      toastHelper.success(t("message.succeed-copy-code"));
     }
   };
 

web/src/labs/marked/marked.test.ts

@@ -26,7 +26,7 @@ This is some text after the horizontal rule.`,
         markdown: `\`\`\`
 hello world!
 \`\`\``,
-        want: `<pre><code class="language-plaintext">hello world!
+        want: `<pre><button class="codeblock-copy-btn">copy</button><code class="language-plaintext">hello world!
 </code></pre>`,
       },
       {
@@ -35,7 +35,7 @@ hello world!
 \`\`\`js
 console.log("hello world!")
 \`\`\``,
-        want: `<p>test code block</p><br><pre><code class="language-js"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"hello world!"</span>)
+        want: `<p>test code block</p><br><pre><button class="codeblock-copy-btn">copy</button><code class="language-js"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"hello world!"</span>)
 </code></pre>`,
       },
     ];

web/src/labs/marked/parser/CodeBlock.ts

@@ -26,7 +26,7 @@ const renderer = (rawStr: string): string => {
     // do nth
   }
 
-  return `<pre><code class="language-${language}">${highlightedCode}</code></pre>`;
+  return `<pre><button class="codeblock-copy-btn">copy</button><code class="language-${language}">${highlightedCode}</code></pre>`;
 };
 
 export default {

web/src/less/memo-content.less

@@ -64,11 +64,21 @@
     }
 
     pre {
-      @apply w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap;
+      @apply w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative;
 
       code {
         @apply block;
       }
+
+      &:hover{
+        .codeblock-copy-btn{
+          @apply flex;
+        }
+      }
+
+      .codeblock-copy-btn{
+        @apply btn-normal absolute hidden top-2 right-2 border-solid border-2;
+      }
     }
 
     code {

web/src/locales/en.json

@@ -219,6 +219,7 @@
     "private-only": "This memo is private only.",
     "copied": "Copied",
     "succeed-copy-content": "Succeed to copy content to clipboard.",
+    "succeed-copy-code": "Succeed to copy code to clipboard.",
     "succeed-copy-link": "Succeed to copy link to clipboard.",
     "change-resource-filename": "Change resource filename",
     "resource-filename-updated": "Resource filename changed.",

web/src/locales/zh.json

@@ -219,6 +219,7 @@
     "private-only": "此 Memo 仅自己可见",
     "copied": "已复制",
     "succeed-copy-content": "复制内容到剪贴板成功。",
+    "succeed-copy-code": "复制代码到剪贴板成功。",
     "succeed-copy-link": "复制链接到剪贴板成功。",
     "change-resource-filename": "更改资源文件名",
     "resource-filename-updated": "资源文件名更改成功。",