From 1106a516cf6b2b2fb56b7422cca2dacce540b427 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Thu, 26 Oct 2023 22:36:00 +0300 Subject: [PATCH 1/3] chore: update react-icons to get latest icons --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index ba84fdc29..b52a17755 100644 --- a/package-lock.json +++ b/package-lock.json @@ -66,7 +66,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.15.0", "react-hot-toast": "^2.2.0", - "react-icons": "^4.8.0", + "react-icons": "^4.11.0", "react-image": "^4.1.0", "react-loading-icons": "^1.0.8", "react-mentions": "^4.4.0", @@ -31319,9 +31319,9 @@ } }, "node_modules/react-icons": { - "version": "4.8.0", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", - "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", "peerDependencies": { "react": "*" } @@ -61177,9 +61177,9 @@ } }, "react-icons": { - "version": "4.8.0", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", - "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", "requires": {} }, "react-image": { diff --git a/package.json b/package.json index 6b016b111..9decba9a8 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.15.0", "react-hot-toast": "^2.2.0", - "react-icons": "^4.8.0", + "react-icons": "^4.11.0", "react-image": "^4.1.0", "react-loading-icons": "^1.0.8", "react-mentions": "^4.4.0", From 73d4e6050bd73c157081b052a5ec01cdd1d728d1 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Wed, 25 Oct 2023 22:57:33 +0300 Subject: [PATCH 2/3] fix: make line numbers un-selectable and hence un-copyable Closes #1441 --- src/components/JSONViewer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/JSONViewer/index.tsx b/src/components/JSONViewer/index.tsx index 5cdebbe9c..feca6d9a5 100644 --- a/src/components/JSONViewer/index.tsx +++ b/src/components/JSONViewer/index.tsx @@ -34,7 +34,7 @@ function JSONViewerLine({ > {showLineNo && ( {idx + 1} From d2fb93f454dea437a4d2e41c9072954328dfabb7 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Wed, 25 Oct 2023 22:59:01 +0300 Subject: [PATCH 3/3] feat: add copy button to code highlighter Closes #1441 Update src/components/JSONViewer/index.tsx Co-authored-by: Moshe Immerman Update src/components/JSONViewer/index.tsx Co-authored-by: Moshe Immerman fix: use GoCopy instead of facopy icon --- src/components/JSONViewer/index.tsx | 86 ++++++++++++++++++----------- 1 file changed, 54 insertions(+), 32 deletions(-) diff --git a/src/components/JSONViewer/index.tsx b/src/components/JSONViewer/index.tsx index feca6d9a5..32c416417 100644 --- a/src/components/JSONViewer/index.tsx +++ b/src/components/JSONViewer/index.tsx @@ -1,7 +1,10 @@ -import { ComponentProps, useMemo } from "react"; -import Highlight, { defaultProps, Language } from "prism-react-renderer"; +import Highlight, { Language, defaultProps } from "prism-react-renderer"; import vsLight from "prism-react-renderer/themes/vsLight"; +import { ComponentProps, useMemo } from "react"; +import { GoCopy } from "react-icons/go"; import { parse, stringify } from "yaml"; +import { Button } from "../Button"; +import { useCopyToClipboard } from "../Hooks/useCopyToClipboard"; type RenderProps = Parameters< ComponentProps["children"] @@ -34,7 +37,7 @@ function JSONViewerLine({ > {showLineNo && ( {idx + 1} @@ -63,6 +66,7 @@ type JSONViewerProps = { * **/ convertToYaml?: boolean; + hideCopyButton?: boolean; }; export function JSONViewer({ @@ -71,7 +75,8 @@ export function JSONViewer({ showLineNo, selections, onClick = () => {}, - convertToYaml = false + convertToYaml = false, + hideCopyButton = false }: JSONViewerProps) { // convert JSON object to YAML string const codeForHighlight = useMemo(() => { @@ -92,6 +97,8 @@ export function JSONViewer({ return code; }, [code, convertToYaml, format]); + const copyFn = useCopyToClipboard(); + const formatDerived = useMemo(() => { if (format !== "json") { return format; @@ -103,34 +110,49 @@ export function JSONViewer({ }, [convertToYaml, format]); return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
-          {tokens.map((line, i) => {
-            const { style, ...props } = getLineProps({ line, key: i });
-            return (
-              
-            );
-          })}
-
+
+ + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + 
+            {tokens.map((line, i) => {
+              const { style, ...props } = getLineProps({ line, key: i });
+              return (
+                
+              );
+            })}
+
+ )} + + {!hideCopyButton && ( +
); }