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"
}`}
>
+