Fix resilient link preview providers

Author: appflowy

src/components/editor/components/blocks/link-preview/LinkPreview.tsx

@@ -1,25 +1,27 @@
-import axios from 'axios';
-import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Element } from 'slate';
 import { useReadOnly, useSlateStatic } from 'slate-react';
 
 import { YjsEditor } from '@/application/slate-yjs';
 import { BlockType, LinkPreviewType } from '@/application/types';
 import { ReactComponent as LinkIcon } from '@/assets/icons/link.svg';
-import emptyImageSrc from '@/assets/images/empty.png';
 import { usePopoverContext } from '@/components/editor/components/block-popover/BlockPopoverContext';
 import { EditorElementProps, LinkPreviewNode } from '@/components/editor/editor.type';
+import { buildFallbackLinkPreviewData, fetchLinkPreviewData, LinkPreviewData } from '@/utils/link-preview';
 import { openUrl } from '@/utils/url';
 
+interface RemoteLinkPreviewData {
+  data: LinkPreviewData;
+  url: string;
+}
+
 export const LinkPreview = memo(
   forwardRef<HTMLDivElement, EditorElementProps<LinkPreviewNode>>(({ node, children, ...attributes }, ref) => {
-    const [data, setData] = useState<{
-      image?: { url: string };
-      title: string;
-      description: string;
-    } | null>(null);
-    const [notFound, setNotFound] = useState<boolean>(false);
+    const [remotePreview, setRemotePreview] = useState<RemoteLinkPreviewData | null>(null);
     const url = node.data.url;
+    const fallbackData = useMemo(() => (url ? buildFallbackLinkPreviewData(url) : null), [url]);
+    const remoteData = remotePreview && remotePreview.url === url ? remotePreview.data : null;
+    const data = remoteData ?? fallbackData;
     const previewType = node.data.preview_type ?? LinkPreviewType.Bookmark;
     const isEmbed = previewType === LinkPreviewType.Embed;
     const editor = useSlateStatic() as YjsEditor;
@@ -28,28 +30,31 @@ export const LinkPreview = memo(
     const { openPopover } = usePopoverContext();
 
     useEffect(() => {
-      if (!url) return;
+      if (!url) {
+        setRemotePreview(null);
+        return;
+      }
+
+      const controller = new AbortController();
 
-      setData(null);
+      setRemotePreview(null);
       void (async () => {
         try {
-          setNotFound(false);
-          const response = await axios.get(`https://api.microlink.io/?url=${url}`);
+          const data = await fetchLinkPreviewData(url, controller.signal);
 
-          if (response.data.statusCode !== 200) {
-            setNotFound(true);
-            return;
+          if (!controller.signal.aborted) {
+            setRemotePreview({ url, data });
           }
-
-          const data = response.data.data;
-
-          setData(data);
         } catch (_) {
-          setNotFound(true);
+          if (!controller.signal.aborted) {
+            setRemotePreview(null);
+          }
         }
       })();
+
+      return () => controller.abort();
     }, [url]);
-    const imageUrl = data?.image?.url;
+    const imageUrl = data?.image?.url || data?.logo?.url;
     const handleClick = useCallback(() => {
       if (!url) {
         if (!readOnly && emptyRef.current) {
@@ -81,28 +86,6 @@ export const LinkPreview = memo(
               <LinkIcon className={'h-6 w-6 flex-none'} />
               <div className={'truncate'}>{isEmbed ? 'Paste a link to embed' : 'Paste a link to create a bookmark'}</div>
             </div>
-          ) : notFound ? (
-            <div className={`link-preview-not-found flex w-full min-w-0 ${isEmbed ? 'flex-col' : 'items-center'}`}>
-              {!isEmbed && (
-                <div
-                  className={
-                    'link-preview-empty-thumb mr-2 flex h-[80px] w-[120px] min-w-[80px] items-center justify-center rounded border text-text-primary'
-                  }
-                >
-                  <img
-                    src={emptyImageSrc}
-                    alt={'Empty state'}
-                    className={'link-preview-empty-image h-full object-cover object-center'}
-                  />
-                </div>
-              )}
-              <div className={`link-preview-content flex min-w-0 flex-1 flex-col ${isEmbed ? 'p-4' : ''}`}>
-                <div className={'link-preview-title text-function-error'}>
-                  The link cannot be previewed. Click to open in a new tab.
-                </div>
-                <div className={'link-preview-url text-sm text-text-secondary'}>{url}</div>
-              </div>
-            </div>
           ) : (
             <>
               {imageUrl && (
@@ -128,11 +111,15 @@ export const LinkPreview = memo(
                 >
                   {data?.title}
                 </div>
-                <div
-                  className={'link-preview-description max-h-[64px] overflow-hidden truncate text-sm text-text-primary'}
-                >
-                  {data?.description}
-                </div>
+                {data?.description && (
+                  <div
+                    className={
+                      'link-preview-description max-h-[64px] overflow-hidden truncate text-sm text-text-primary'
+                    }
+                  >
+                    {data.description}
+                  </div>
+                )}
                 <div className={'link-preview-url truncate whitespace-nowrap text-xs text-text-secondary'}>{url}</div>
               </div>
             </>

src/components/editor/components/leaf/mention/MentionExternalLink.tsx

@@ -1,41 +1,61 @@
-import axios from 'axios';
 import React, { useEffect } from 'react';
 
+import { buildFallbackLinkPreviewData, fetchLinkPreviewData, LinkPreviewData } from '@/utils/link-preview';
+
+interface RemoteLinkPreviewData {
+  data: LinkPreviewData;
+  url: string;
+}
+
 function MentionExternalLink ({
   url,
 }: {
   url: string;
 }) {
-  const [data, setData] = React.useState<{ title?: string; logo?: string } | undefined>(undefined);
+  const fallbackData = React.useMemo(() => buildFallbackLinkPreviewData(url), [url]);
+  const [remotePreview, setRemotePreview] = React.useState<RemoteLinkPreviewData | null>(null);
+  const data = remotePreview && remotePreview.url === url ? remotePreview.data : fallbackData;
 
   useEffect(() => {
-    void axios.get(`https://api.microlink.io/?url=${url}`).then((data) => {
-        setData({
-          title: data.data.data.title,
-          logo: data.data.data.logo.url,
-        });
-      },
-    );
+    const controller = new AbortController();
+
+    setRemotePreview(null);
+    void fetchLinkPreviewData(url, controller.signal)
+      .then((data) => {
+        if (!controller.signal.aborted) {
+          setRemotePreview({ url, data });
+        }
+      })
+      .catch(() => {
+        if (!controller.signal.aborted) {
+          setRemotePreview(null);
+        }
+      });
+
+    return () => controller.abort();
   }, [url]);
+
+  const imageUrl = data.logo?.url || data.image?.url;
+
   return (
     <span
       onClick={() => {
         window.open(url, '_blank');
       }}
       className={'cursor-pointer inline-flex gap-1.5 text-text-primary hover:underline'}
     >
-      {data?.logo && (
+      {imageUrl && (
         <span className={'mt-0.5'}>
           <img
             className={'object-cover w-5 h-5'}
-            src={data.logo}
-            alt={data.logo}
+            src={imageUrl}
+            alt={data.title}
           />
         </span>
       )}
-      <span className={'leading-[24px]'}>{data?.title || url}</span>
+      <span className={'leading-[24px]'}>{data.title || url}</span>
     </span>
   );
 }
 
-export default MentionExternalLink;
+export default MentionExternalLink;