Preview arbitrary urls within a document (#5598)

app/components/HoverPreview/Components.tsx

@@ -21,13 +21,13 @@ const StyledText = styled(Text)`
 `;
 
 export const Preview = styled(Link)`
-  cursor: var(--pointer);
+  cursor: ${(props: any) =>
+    props.as === "div" ? "default" : "var(--pointer)"};
   border-radius: 4px;
   box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3),
     0 0 1px 1px rgba(0, 0, 0, 0.05);
   overflow: hidden;
   position: absolute;
-  ${(props) => (!props.to ? "pointer-events: none;" : "")}
 `;
 
 export const Title = styled.h2`

app/components/HoverPreview/HoverPreviewLink.tsx

@@ -17,7 +17,7 @@ type Props = {
   url: string;
   /** Title for the preview card */
   title: string;
-  /** Url for thumbnail served by the link provider*/
+  /** Url for thumbnail served by the link provider */
   thumbnailUrl: string;
   /** Some description about the link provider */
   description: string;
@@ -25,7 +25,7 @@ type Props = {
 
 function HoverPreviewLink({ url, thumbnailUrl, title, description }: Props) {
   return (
-    <Preview to={{ pathname: url }} target="_blank" rel="noopener noreferrer">
+    <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
       <Flex column>
         {thumbnailUrl ? <Thumbnail src={thumbnailUrl} alt={""} /> : null}
         <Card>

app/components/HoverPreview/HoverPreviewMention.tsx

@@ -17,7 +17,7 @@ type Props = {
 
 function HoverPreviewMention({ url, title, info, color }: Props) {
   return (
-    <Preview to="">
+    <Preview as="div">
       <Card fadeOut={false}>
         <CardContent>
           <Flex gap={12}>