Commit f9dd7ad8 authored by Steven's avatar Steven

style: improve code block styling and formatting

- Adjust CodeBlock styling for better layout and spacing
- Reorganize copy button positioning with absolute positioning
- Simplify button styling and reduce icon sizes
- Wrap MermaidBlock in pre tag for consistent structure
- Format useDropdownMenuSubHoverDelay hook call for readability

🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: 's avatarClaude Haiku 4.5 <noreply@anthropic.com>
parent dfc0d376
...@@ -25,9 +25,11 @@ export const CodeBlock = observer(({ children, className, ...props }: CodeBlockP ...@@ -25,9 +25,11 @@ export const CodeBlock = observer(({ children, className, ...props }: CodeBlockP
// If it's a mermaid block, render with MermaidBlock component // If it's a mermaid block, render with MermaidBlock component
if (language === "mermaid") { if (language === "mermaid") {
return ( return (
<MermaidBlock className={className} {...props}> <pre className="relative">
{children} <MermaidBlock className={cn(className)} {...props}>
</MermaidBlock> {children}
</MermaidBlock>
</pre>
); );
} }
...@@ -112,16 +114,16 @@ export const CodeBlock = observer(({ children, className, ...props }: CodeBlockP ...@@ -112,16 +114,16 @@ export const CodeBlock = observer(({ children, className, ...props }: CodeBlockP
}; };
return ( return (
<pre className="relative group"> <pre className="relative">
<div className="w-full flex flex-row justify-between items-center"> <div className="absolute right-2 leading-3 top-1.5 flex flex-row justify-end items-center gap-1 opacity-60 hover:opacity-80">
<span className="text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider select-none">{language}</span> <span className="text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider select-none">{language}</span>
<button <button
onClick={handleCopy} onClick={handleCopy}
className={cn("p-1.5 rounded-md transition-all", "hover:bg-accent/50", copied ? "text-primary" : "text-muted-foreground")} className={cn("rounded-md transition-all", "hover:bg-accent/50", copied ? "text-primary" : "text-muted-foreground")}
aria-label={copied ? "Copied" : "Copy code"} aria-label={copied ? "Copied" : "Copy code"}
title={copied ? "Copied!" : "Copy code"} title={copied ? "Copied!" : "Copy code"}
> >
{copied ? <CheckIcon className="w-3.5 h-3.5" /> : <CopyIcon className="w-3.5 h-3.5" />} {copied ? <CheckIcon className="w-3 h-3" /> : <CopyIcon className="w-3 h-3" />}
</button> </button>
</div> </div>
<div className={className} {...props}> <div className={className} {...props}>
......
...@@ -41,7 +41,10 @@ const InsertMenu = observer((props: Props) => { ...@@ -41,7 +41,10 @@ const InsertMenu = observer((props: Props) => {
// Abort controller for canceling geocoding requests // Abort controller for canceling geocoding requests
const { abort: abortGeocoding, abortAndCreate: createGeocodingSignal } = useAbortController(); const { abort: abortGeocoding, abortAndCreate: createGeocodingSignal } = useAbortController();
const { handleTriggerEnter, handleTriggerLeave, handleContentEnter, handleContentLeave } = useDropdownMenuSubHoverDelay(150, setMoreSubmenuOpen); const { handleTriggerEnter, handleTriggerLeave, handleContentEnter, handleContentLeave } = useDropdownMenuSubHoverDelay(
150,
setMoreSubmenuOpen,
);
const { fileInputRef, selectingFlag, handleFileInputChange, handleUploadClick } = useFileUpload((newFiles: LocalFile[]) => { const { fileInputRef, selectingFlag, handleFileInputChange, handleUploadClick } = useFileUpload((newFiles: LocalFile[]) => {
if (context.addLocalFiles) { if (context.addLocalFiles) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment