From a10f3c9ba18cb512d68cbbe75c6d94055ccde815 Mon Sep 17 00:00:00 2001 From: Ansh Tyagi Date: Mon, 2 Oct 2023 12:53:53 +0530 Subject: [PATCH] [Feature]: Added Copy Code Button (Web) --- components/codePreview/index.tsx | 12 +- components/codePreview/style.module.css | 4 + package.json | 4 + public/locales/en/categories.json | 12 + yarn.lock | 403 +++++++++++++++++++++++- 5 files changed, 432 insertions(+), 3 deletions(-) diff --git a/components/codePreview/index.tsx b/components/codePreview/index.tsx index 962d9d18..9a75c1bc 100644 --- a/components/codePreview/index.tsx +++ b/components/codePreview/index.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from "react"; +import React, { useCallback, useRef, useState } from "react"; import "highlight.js/styles/atom-one-light.css"; import { Algorithm } from "lib/models"; import { @@ -28,6 +28,7 @@ import { OpenInNew, PlayArrow, } from "@material-ui/icons"; +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import NextLink from "next/link"; import { StringParam, useQueryParam, withDefault } from "next-query-params"; import classes from "./style.module.css"; @@ -45,6 +46,11 @@ export default function CodePreview({ algorithm }: { algorithm: Algorithm }) { const fabRef = useRef(); const [mobileMoreMenuOpen, setMobileMoreMenuOpen] = useState(false); + const copyCode = useCallback(async () => { + const codeText = document.querySelector(".style_pre__k555n")?.textContent; + await navigator.clipboard.writeText(codeText); + },[]) + return (
@@ -92,6 +98,10 @@ export default function CodePreview({ algorithm }: { algorithm: Algorithm }) { ) : ( <>
+ + + +