Add copy for code blocks (#68)

Author: lzm0x219

.vscode/settings.json

@@ -18,6 +18,7 @@
     "outfile",
     "packagejson",
     "predev",
-    "prereleased"
+    "prereleased",
+    "zeroclipboard"
   ]
 }

src/main.ts

@@ -2,6 +2,7 @@ import vscode from "vscode";
 import commands from "./commands";
 import onRefreshMarkdownPreview from "./events/onRefreshMarkdownPreview";
 import markdownItTheme from "./plugins/markdown-it-theme";
+import markdownItCodeCopy from "./plugins/markdown-it-code-copy";
 
 export function activate(context: vscode.ExtensionContext) {
 	const registerCommands = commands.map(({ command, commandHander }) =>
@@ -14,6 +15,7 @@ export function activate(context: vscode.ExtensionContext) {
 		extendMarkdownIt(md: markdownit) {
 			return md
 				.use(markdownItTheme)
+				.use(markdownItCodeCopy)
 				.use(require("markdown-it-emoji"))
 				.use(require("markdown-it-github-headings"), {
 					linkIcon: `<svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>`,

src/plugins/markdown-it-code-copy.ts

@@ -0,0 +1,44 @@
+import type Renderer from "markdown-it/lib/renderer";
+
+export default function markdownItCodeCopy(md: markdownit) {
+	function createRenderRule(originRule: Renderer.RenderRule) {
+		return function (...args: Parameters<Renderer.RenderRule>) {
+			const [tokens, idx] = args;
+			const content = tokens[idx].content.split("").reduce((result, pre) => {
+				switch (pre) {
+					case '"':
+						result += "&quot;";
+						break;
+					case "'":
+						result += "&lt;";
+						break;
+					default:
+						result += pre;
+						break;
+				}
+				return result;
+			}, "");
+
+			return `
+        <div class="highlight highlight-source-shell notranslate position-relative overflow-auto">
+          ${originRule(...args)}
+          <div class="zeroclipboard-container position-absolute right-0 top-0">
+            <clipboard-copy style="margin: 7.8px;" aria-label="Copied!" data-view-component="true" class="ClipboardButton btn js-clipboard-copy tooltipped-no-delay p-0" data-copy-feedback="Copied!" value="${content}" tabindex="0" role="button">
+              <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2">
+                <path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
+              </svg>
+              <svg style="display: none;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success m-2">
+                <path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
+              </svg>
+            </clipboard-copy>
+          </div>
+        </div>
+      `;
+		};
+	}
+
+	md.renderer.rules.code_block = createRenderRule(md.renderer.rules.code_block);
+	md.renderer.rules.fence = createRenderRule(md.renderer.rules.fence);
+
+	return md;
+}

styles/main.scss

@@ -2,5 +2,8 @@
 @import "@primer/css/base/index.scss";
 @import "@primer/css/markdown/index.scss";
 @import "@primer/css/support/index.scss";
+@import "@primer/css/buttons/index.scss";
+@import "@primer/css/utilities/index.scss";
+@import "@primer/css/tooltips/index.scss";
 @import "./reset.scss";
 @import "./highlight.scss";

styles/reset.scss

@@ -56,4 +56,21 @@ body.showEditorSelection {
   .footnote-backref {
     font-family: monospace;
   }
+
+  .highlight {
+    .zeroclipboard-container {
+      display: none;
+      animation: fade-out 200ms both;
+    }
+    &:hover {
+      .zeroclipboard-container {
+        display: block;
+        animation: fade-in 200ms both;
+      }
+    }
+    .ClipboardButton.ClipboardButton--success {
+      border-color: var(--color-success-emphasis);
+      box-shadow: 0 0 0 0.2em rgb(52 208 88 / 40%);
+    }
+  }
 }

web/main.ts

@@ -0,0 +1,18 @@
+import "@primer/view-components/app/components/primer/beta/clipboard_copy";
+import "@primer/view-components/app/components/primer/alpha/tool_tip";
+
+document.addEventListener("clipboard-copy", function (event) {
+	const button = event.target as HTMLButtonElement;
+	button.classList.add(
+		"ClipboardButton--success",
+		"tooltipped",
+		"tooltipped-w",
+	);
+	setTimeout(() => {
+		button.classList.remove(
+			"ClipboardButton--success",
+			"tooltipped",
+			"tooltipped-w",
+		);
+	}, 2e3);
+});