From e05a3991772f2099e298761dbb57f71a543bad43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aneta=20Jastrz=C4=99bska?=
 <1544710+anetaj@users.noreply.github.com>
Date: Sat, 21 Sep 2024 13:03:31 +0200
Subject: [PATCH] add copy button

---
 .../src/sidebar/MarkdownRender/BlockCode.tsx  | 74 +++++++++++++++++++
 .../void/src/sidebar/MarkdownRender/index.ts  |  2 +
 2 files changed, 76 insertions(+)
 create mode 100644 extensions/void/src/sidebar/MarkdownRender/BlockCode.tsx
 create mode 100644 extensions/void/src/sidebar/MarkdownRender/index.ts

diff --git a/extensions/void/src/sidebar/MarkdownRender/BlockCode.tsx b/extensions/void/src/sidebar/MarkdownRender/BlockCode.tsx
new file mode 100644
index 00000000..812c7e2a
--- /dev/null
+++ b/extensions/void/src/sidebar/MarkdownRender/BlockCode.tsx
@@ -0,0 +1,74 @@
+import React, { useCallback, useEffect, useState } from "react"
+import { getVSCodeAPI } from "../getVscodeApi"
+
+enum CopyButtonState {
+	Copy = "Copy",
+	Copied = "Copied!",
+	Error = "Could not copy",
+}
+
+const COPY_FEEDBACK_TIMEOUT = 2000
+
+// code block with Apply button at top
+const BlockCode = ({
+	text,
+	disableApplyButton = false,
+}: {
+	text: string
+	disableApplyButton?: boolean
+}) => {
+	const [copyButtonState, setCopyButtonState] = useState(CopyButtonState.Copy)
+
+	useEffect(() => {
+		if (copyButtonState !== CopyButtonState.Copy) {
+			setTimeout(() => {
+				setCopyButtonState(CopyButtonState.Copy)
+			}, COPY_FEEDBACK_TIMEOUT)
+		}
+	}, [copyButtonState])
+
+	const onCopy = useCallback(() => {
+		navigator.clipboard.writeText(text).then(
+			() => {
+				setCopyButtonState(CopyButtonState.Copied)
+			},
+			() => {
+				setCopyButtonState(CopyButtonState.Error)
+			}
+		)
+	}, [text])
+
+	return (
+		<div className="relative group">
+			<div className="absolute top-0 right-0 invisible group-hover:visible">
+				<div className="flex space-x-2 p-2">
+					{!disableApplyButton && (
+						<button
+							className="btn btn-secondary px-3 py-1 text-sm border border-vscode-input-border rounded"
+							onClick={async () => {
+								getVSCodeAPI().postMessage({ type: "applyCode", code: text })
+							}}
+						>
+							Apply
+						</button>
+					)}
+					<button
+						className="btn btn-secondary px-3 py-1 text-sm border border-vscode-input-border rounded"
+						onClick={onCopy}
+					>
+						{copyButtonState}
+					</button>
+				</div>
+			</div>
+			<div
+				className={`overflow-x-auto rounded-sm text-vscode-editor-fg bg-vscode-editor-bg ${
+					disableApplyButton ? "" : "rounded-tl-none"
+				}`}
+			>
+				<pre className="p-4">{text}</pre>
+			</div>
+		</div>
+	)
+}
+
+export default BlockCode
diff --git a/extensions/void/src/sidebar/MarkdownRender/index.ts b/extensions/void/src/sidebar/MarkdownRender/index.ts
new file mode 100644
index 00000000..f37e9ea5
--- /dev/null
+++ b/extensions/void/src/sidebar/MarkdownRender/index.ts
@@ -0,0 +1,2 @@
+export { default as MarkdownRender } from "./MarkdownRender"
+export { default as BlockCode } from "./BlockCode"