wyl/jsonhero-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added a copy text button to a json preview

Browse Source
This commit is contained in:
James Ritchie
2022-03-11 17:41:51 +00:00
parent d9da6d5abe
commit e62deaf17c
4 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/CopyText.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export function CopyText({
}, [value]);
return (
<div onClick={onClick} className={`${className} relative`}>
<div onClick={onClick} className={`${className}`}>
{children}
</div>
);
app/components/JsonPreview.tsx
+21 -2
View File
@@ -10,9 +10,12 @@ import {
TransactionSpec,
} from "@uiw/react-codemirror";
import jsonMap from "json-source-map";
import { useRef, useEffect, useMemo } from "react";
import { useRef, useEffect, useMemo, useState } from "react";
import { getPreviewSetup } from "~/utilities/codeMirrorSetup";
import { lightTheme, darkTheme } from "~/utilities/codeMirrorTheme";
import { CopyTextButton } from "./CopyTextButton";
import { OpenInNewWindow } from "./OpenInWindow";
import { Body } from "./Primitives/Body";
import { useTheme } from "./ThemeProvider";
export type JsonPreviewProps = {
@@ -89,9 +92,25 @@ export function JsonPreview({ json, highlightPath }: JsonPreviewProps) {
view.dispatch(transactionSpec);
}, [view, highlighting, jsonMapped, highlightPath]);
const [hovering, setHovering] = useState(false);
return (
<div>
<div
className="relative w-full h-full"
onMouseEnter={() => setHovering(true)}
onMouseLeave={() => setHovering(false)}
>
<div ref={editor} />
<div
className={`absolute top-1 right-0 flex justify-end w-full transition ${
hovering ? "opacity-100" : "opacity-0"
}`}
>
<CopyTextButton
value={jsonMapped.json}
className="bg-slate-200 hover:bg-slate-300 h-fit mr-1 px-2 py-0.5 rounded-sm transition hover:cursor-pointer dark:text-white dark:bg-slate-700 dark:hover:bg-slate-600"
></CopyTextButton>
</div>
</div>
);
}
app/components/Preview/PreviewBox.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export function PreviewBox({ link, className, children }: PreviewBoxProps) {
Preview
</Title>
<a
className="block rounded-sm p-2 text-slate-700 bg-slate-100 transition dark:text-slate-300 dark:bg-white dark:bg-opacity-5 hover:bg-slate-200 hover:cursor-pointer"
className="block rounded-sm p-2 text-slate-700 bg-slate-100 transition dark:text-slate-300 dark:bg-white dark:bg-opacity-5 hover:cursor-pointer"
href={link}
target="_blank"
>
app/components/Preview/Types/PreviewJson.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ export function PreviewJson({ preview }: { preview: PreviewJson }) {
return (
<PreviewBox className="relative">
<div
className="w-full h-full"
className="relative w-full h-full"
onMouseEnter={() => setHovering(true)}
onMouseLeave={() => setHovering(false)}
>
@@ -32,11 +32,11 @@ export function PreviewJson({ preview }: { preview: PreviewJson }) {
>
<CopyTextButton
value={code}
className="bg-slate-700 h-fit mr-1 px-2 rounded-sm transition hover:bg-slate-600"
className="bg-slate-200 hover:bg-slate-300 h-fit mr-1 px-2 py-0.5 rounded-sm transition dark:text-white dark:bg-slate-700 dark:hover:bg-slate-600"
></CopyTextButton>
<OpenInNewWindow
url={jsonHeroUrl.href}
className="bg-slate-700 h-fit px-2 rounded-sm transition hover:bg-slate-600"
className="bg-slate-200 hover:bg-slate-300 h-fit px-2 py-0.5 rounded-sm transition dark:text-white dark:bg-slate-700 dark:hover:bg-slate-600"
>
<Body>Open in tab</Body>
</OpenInNewWindow>