mirror of https://github.com/usememos/memos.git
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: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
dfc0d376d1
commit
f9dd7ad853
|
|
@ -25,9 +25,11 @@ export const CodeBlock = observer(({ children, className, ...props }: CodeBlockP
|
|||
// If it's a mermaid block, render with MermaidBlock component
|
||||
if (language === "mermaid") {
|
||||
return (
|
||||
<MermaidBlock className={className} {...props}>
|
||||
{children}
|
||||
</MermaidBlock>
|
||||
<pre className="relative">
|
||||
<MermaidBlock className={cn(className)} {...props}>
|
||||
{children}
|
||||
</MermaidBlock>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -112,16 +114,16 @@ export const CodeBlock = observer(({ children, className, ...props }: CodeBlockP
|
|||
};
|
||||
|
||||
return (
|
||||
<pre className="relative group">
|
||||
<div className="w-full flex flex-row justify-between items-center">
|
||||
<pre className="relative">
|
||||
<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>
|
||||
<button
|
||||
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"}
|
||||
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>
|
||||
</div>
|
||||
<div className={className} {...props}>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,10 @@ const InsertMenu = observer((props: Props) => {
|
|||
// Abort controller for canceling geocoding requests
|
||||
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[]) => {
|
||||
if (context.addLocalFiles) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue