From a52970cf34aad94ccb5cb203b3768f6c902a1797 Mon Sep 17 00:00:00 2001 From: Suven-p Date: Sun, 20 Oct 2024 21:20:32 +0545 Subject: [PATCH] Add Copy as Single Line Button --- app/components/CopySingleLineTextButton.tsx | 31 +++++++++++++++++++++ app/components/JsonPreview.tsx | 9 ++++++ 2 files changed, 40 insertions(+) create mode 100644 app/components/CopySingleLineTextButton.tsx diff --git a/app/components/CopySingleLineTextButton.tsx b/app/components/CopySingleLineTextButton.tsx new file mode 100644 index 00000000..75283ad4 --- /dev/null +++ b/app/components/CopySingleLineTextButton.tsx @@ -0,0 +1,31 @@ +import { ClipboardIcon } from "@heroicons/react/outline"; +import { useCallback, useState } from "react"; +import { CopyText } from "./CopyText"; +import { Body } from "./Primitives/Body"; + +export type CopySingleLineTextButtonProps = { + value: string; + className?: string; +}; + +export function CopySingleLineTextButton({ value, className }: CopySingleLineTextButtonProps) { + const [copied, setCopied] = useState(false); + const onCopied = useCallback(() => { + setCopied(true); + const timeout = setTimeout(() => { + setCopied(false); + }, 1500); + }, [value]); + return ( + + {copied ? ( + Copied! + ) : ( +
+ + Copy As Single Line +
+ )} + + ); +} diff --git a/app/components/JsonPreview.tsx b/app/components/JsonPreview.tsx index 3ec1d459..f8db7979 100644 --- a/app/components/JsonPreview.tsx +++ b/app/components/JsonPreview.tsx @@ -17,6 +17,7 @@ import { CopyTextButton } from "./CopyTextButton"; import { useTheme } from "./ThemeProvider"; import {usePreferences} from '~/components/PreferencesProvider'; import { useHotkeys } from "react-hotkeys-hook"; +import { CopySingleLineTextButton } from './CopySingleLineTextButton'; export type JsonPreviewProps = { json: unknown; @@ -31,6 +32,10 @@ export function JsonPreview({ json, highlightPath }: JsonPreviewProps) { return jsonMap.stringify(json, null, preferences?.indent || 2); }, [json, preferences]); + const jsonMappedSingleLine = useMemo(() => { + return jsonMap.stringify(json); + }, [json]); + const lines: LineRange | undefined = useMemo(() => { if (!highlightPath) { return; @@ -116,6 +121,10 @@ export function JsonPreview({ json, highlightPath }: JsonPreviewProps) { hovering ? "opacity-100" : "opacity-0" }`} > +