diff --git a/src/components/ExternalContent/index.tsx b/src/components/ExternalContent/index.tsx index 0909550..aa6e728 100644 --- a/src/components/ExternalContent/index.tsx +++ b/src/components/ExternalContent/index.tsx @@ -45,7 +45,7 @@ export default function ExternalContent({ } if (node.type === 'url') { - return + return } if (node.type === 'x-post') { diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx index d2edbbc..1c43f41 100644 --- a/src/components/ExternalLink/index.tsx +++ b/src/components/ExternalLink/index.tsx @@ -1,4 +1,6 @@ import { useSecondaryPage } from '@/PageManager' +import { Button } from '@/components/ui/button' +import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer' import { DropdownMenu, DropdownMenuContent, @@ -8,33 +10,106 @@ import { import { toExternalContent } from '@/lib/link' import { truncateUrl } from '@/lib/url' import { cn } from '@/lib/utils' +import { useScreenSize } from '@/providers/ScreenSizeProvider' import { ExternalLink as ExternalLinkIcon, MessageSquare } from 'lucide-react' -import { useMemo } from 'react' +import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' -export default function ExternalLink({ url, className }: { url: string; className?: string }) { +export default function ExternalLink({ + url, + className, + justOpenLink +}: { + url: string + className?: string + justOpenLink?: boolean +}) { const { t } = useTranslation() + const { isSmallScreen } = useScreenSize() const { push } = useSecondaryPage() + const [isDrawerOpen, setIsDrawerOpen] = useState(false) const displayUrl = useMemo(() => truncateUrl(url), [url]) const handleOpenLink = (e: React.MouseEvent) => { e.stopPropagation() + if (isSmallScreen) { + setIsDrawerOpen(false) + } window.open(url, '_blank', 'noreferrer') } const handleViewDiscussions = (e: React.MouseEvent) => { e.stopPropagation() + if (isSmallScreen) { + setIsDrawerOpen(false) + } push(toExternalContent(url)) } + if (justOpenLink) { + return ( + e.stopPropagation()} + > + {displayUrl} + + ) + } + + const trigger = ( + { + e.stopPropagation() + if (isSmallScreen) { + setIsDrawerOpen(true) + } + }} + title={url} + > + {displayUrl} + + ) + + if (isSmallScreen) { + return ( + <> + {trigger} + + setIsDrawerOpen(false)} /> + +
+ + +
+
+
+ + ) + } + return ( - - e.stopPropagation()} - title={url} - > + + {displayUrl} diff --git a/src/components/WebPreview/index.tsx b/src/components/WebPreview/index.tsx index 432a4be..879c1ad 100644 --- a/src/components/WebPreview/index.tsx +++ b/src/components/WebPreview/index.tsx @@ -4,8 +4,17 @@ import { useContentPolicy } from '@/providers/ContentPolicyProvider' import { useScreenSize } from '@/providers/ScreenSizeProvider' import { useMemo } from 'react' import Image from '../Image' +import ExternalLink from '../ExternalLink' -export default function WebPreview({ url, className }: { url: string; className?: string }) { +export default function WebPreview({ + url, + className, + mustLoad +}: { + url: string + className?: string + mustLoad?: boolean +}) { const { autoLoadMedia } = useContentPolicy() const { isSmallScreen } = useScreenSize() const { title, description, image } = useFetchWebMetadata(url) @@ -18,12 +27,16 @@ export default function WebPreview({ url, className }: { url: string; className? } }, [url]) - if (!autoLoadMedia) { + if (!autoLoadMedia && !mustLoad) { return null } if (!title) { - return null + if (mustLoad) { + return + } else { + return null + } } if (isSmallScreen && image) { diff --git a/src/pages/secondary/ExternalContentPage/index.tsx b/src/pages/secondary/ExternalContentPage/index.tsx index 3490be3..7c4ff9e 100644 --- a/src/pages/secondary/ExternalContentPage/index.tsx +++ b/src/pages/secondary/ExternalContentPage/index.tsx @@ -29,7 +29,7 @@ const ExternalContentPage = forwardRef(({ index }: { index?: number }, ref) => { displayScrollToTopButton >
- +