github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-] chore: show code block copy button only on hover (#4361)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-05-08 13:42:11 +05:30 committed by GitHub
parent 760063ec75
commit 6793b9e6fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/editor/core/src/ui/extensions/code/code-block-node-view.tsx
View File

@ -5,6 +5,7 @@ import ts from "highlight.js/lib/languages/typescript";
import { CopyIcon, CheckIcon } from "lucide-react"; import { CopyIcon, CheckIcon } from "lucide-react";
import { Node as ProseMirrorNode } from "@tiptap/pm/model"; import { Node as ProseMirrorNode } from "@tiptap/pm/model";
import { cn } from "src/lib/utils"; import { cn } from "src/lib/utils";
import { Tooltip } from "@plane/ui";
// we just have ts support for now // we just have ts support for now
const lowlight = createLowlight(common); const lowlight = createLowlight(common);
@ -30,11 +31,12 @@ export const CodeBlockComponent: React.FC<CodeBlockComponentProps> = ({ node })
}; };
return ( return (
<NodeViewWrapper className="code-block relative"> <NodeViewWrapper className="code-block relative group/code">
<Tooltip tooltipContent="Copy code">
<button <button
type="button" type="button"
className={cn( className={cn(
"group absolute top-2 right-2 z-10 flex items-center justify-center w-8 h-8 rounded-md bg-custom-background-80 border border-custom-border-200 transition duration-150 ease-in-out", "group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-custom-background-80 border border-custom-border-200 transition duration-150 ease-in-out",
{ {
"bg-green-500/10 hover:bg-green-500/10 active:bg-green-500/10": copied, "bg-green-500/10 hover:bg-green-500/10 active:bg-green-500/10": copied,
} }
@ -44,9 +46,10 @@ export const CodeBlockComponent: React.FC<CodeBlockComponentProps> = ({ node })
{copied ? ( {copied ? (
<CheckIcon className="h-3 w-3 text-green-500" strokeWidth={3} /> <CheckIcon className="h-3 w-3 text-green-500" strokeWidth={3} />
) : ( ) : (
<CopyIcon className="h-3 w-3 text-custom-text-300 group-hover:text-custom-text-100" /> <CopyIcon className="h-3 w-3 text-custom-text-300 group-hover/button:text-custom-text-100" />
)} )}
</button> </button>
</Tooltip>
<pre className="bg-custom-background-90 text-custom-text-100 rounded-lg p-8 pl-9 pr-4"> <pre className="bg-custom-background-90 text-custom-text-100 rounded-lg p-8 pl-9 pr-4">
<NodeViewContent as="code" className="whitespace-[pre-wrap]" /> <NodeViewContent as="code" className="whitespace-[pre-wrap]" />