happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: update link preview

This commit is contained in:
Steven 2024-04-25 21:01:13 +08:00
parent 81d24f32a7
commit 647602beac
1 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/components/MemoContent/Link.tsx
View File

@ -1,5 +1,5 @@
import { Link as MLink, Tooltip } from "@mui/joy"; import { Link as MLink, Tooltip } from "@mui/joy";
import { useEffect, useState } from "react"; import { useState } from "react";
import { linkServiceClient } from "@/grpcweb"; import { linkServiceClient } from "@/grpcweb";
import { LinkMetadata } from "@/types/proto/api/v2/link_service"; import { LinkMetadata } from "@/types/proto/api/v2/link_service";
@ -18,43 +18,48 @@ const getFaviconWithGoogleS2 = (url: string) => {
}; };
const Link: React.FC<Props> = ({ text, url }: Props) => { const Link: React.FC<Props> = ({ text, url }: Props) => {
const [initialized, setInitialized] = useState<boolean>(false);
const [showTooltip, setShowTooltip] = useState<boolean>(false);
const [linkMetadata, setLinkMetadata] = useState<LinkMetadata | undefined>(); const [linkMetadata, setLinkMetadata] = useState<LinkMetadata | undefined>();
useEffect(() => { const handleMouseEnter = async () => {
(async () => { if (!initialized) {
try { try {
const { linkMetadata } = await linkServiceClient.getLinkMetadata({ link: url }, {}); const { linkMetadata } = await linkServiceClient.getLinkMetadata({ link: url }, {});
setLinkMetadata(linkMetadata); setLinkMetadata(linkMetadata);
} catch (error) { } catch (error) {
console.error("Error fetching URL metadata:", error); console.error("Error fetching URL metadata:", error);
} }
})(); setInitialized(true);
}, [url]); }
setTimeout(() => setShowTooltip(true), 0);
};
return linkMetadata ? ( return (
<Tooltip <Tooltip
variant="outlined" variant="outlined"
title={ title={
<div className="w-full max-w-64 sm:max-w-96 p-1 flex flex-col"> linkMetadata && (
<a href={url} target="_blank" rel="noopener noreferrer" className="group w-full flex flex-row justify-start items-center gap-1"> <div className="w-full max-w-64 sm:max-w-96 p-1 flex flex-col">
<img className="w-5 h-5 pointer-events-none" src={getFaviconWithGoogleS2(url)} alt={linkMetadata?.title} /> <div className="w-full flex flex-row justify-start items-center gap-1">
<h3 className="text-base truncate dark:opacity-90 group-hover:opacity-80 group-hover:underline">{linkMetadata?.title}</h3> <img className="w-5 h-5 rounded" src={getFaviconWithGoogleS2(url)} alt={linkMetadata?.title} />
</a> <h3 className="text-base truncate dark:opacity-90">{linkMetadata?.title}</h3>
{linkMetadata.description && ( </div>
<p className="mt-1 w-full text-sm leading-snug opacity-80 line-clamp-3">{linkMetadata.description}</p> {linkMetadata.description && (
)} <p className="mt-1 w-full text-sm leading-snug opacity-80 line-clamp-3">{linkMetadata.description}</p>
</div> )}
</div>
)
} }
open={showTooltip}
arrow arrow
> >
<MLink underline="always" target="_blank" href={url}> <MLink underline="always" target="_blank" href={url}>
{text || url} <span onMouseEnter={handleMouseEnter} onMouseLeave={() => setShowTooltip(false)}>
{text || url}
</span>
</MLink> </MLink>
</Tooltip> </Tooltip>
) : (
<MLink underline="always" target="_blank" href={url}>
{text || url}
</MLink>
); );
}; };