Merge pull request #306 from hunghg255/feature/image-gif-tenor

Author: hunghg255

docs/extensions/ImageGif/index.md

@@ -19,9 +19,10 @@ const extensions = [
   ...,
   // Import Extensions Here
   ImageGif.configure({// [!code ++]
-    GIPHY_API_KEY: 'GIPHY_API_KEY', // [!code ++]
+    API_KEY: '', // [!code ++]
+    provider: 'tenor' // [!code ++] (tenor or giphy)
   }),// [!code ++]
 ];
 ```
 
-- `GIPHY_API_KEY` - Giphy API Key. You can get it from [Giphy Developers](https://developers.giphy.com/).
+- `API_KEY` -  You can get it from [Giphy Developers](https://developers.giphy.com/) or  [Tenor Developers](https://tenor.com/)

playground/src/App.tsx

@@ -133,7 +133,8 @@ const extensions = [
     },
   }),
   ImageGif.configure({
-    GIPHY_API_KEY: import.meta.env.VITE_GIPHY_API_KEY as string,
+    provider: 'giphy',
+    API_KEY: import.meta.env.VITE_GIPHY_API_KEY as string
   }),
   Blockquote,
   SlashCommand,

src/extensions/ImageGif/ImageGif.ts

@@ -19,10 +19,11 @@ export interface SetImageAttrsOptions {
 }
 
 interface ImageGifOptions extends ImageOptions {
+  provider: 'giphy' | 'tenor'
   /**
-   * The key for the gif https://giphy.com/
+   * The key for the gif https://giphy.com/ or https://tenor.com/
    */
-  GIPHY_API_KEY: string
+  API_KEY: string
 }
 
 declare module '@tiptap/core' {
@@ -53,12 +54,14 @@ export const ImageGif = /* @__PURE__ */ TiptapImage.extend<ImageGifOptions>({
       content: '',
       marks: '',
       group: 'block',
-      GIPHY_API_KEY: '',
+      API_KEY: '',
+      provider: 'giphy',
       draggable: false,
       selectable: true,
       atom: true,
       button: ({ editor, extension, t }: any) => {
-        const giphyApiKey = extension?.options?.GIPHY_API_KEY || '';
+        const provider = extension?.options?.provider || '';
+        const apiKey = extension?.options?.API_KEY || '';
 
         return {
           component: ImageGifActionButton,
@@ -71,7 +74,8 @@ export const ImageGif = /* @__PURE__ */ TiptapImage.extend<ImageGifOptions>({
             disabled: false,
             icon: 'GifIcon',
             tooltip: t('editor.imageGif.tooltip'),
-            giphyApiKey,
+            apiKey,
+            provider
           },
         };
       },

src/extensions/ImageGif/components/ImageGifActionButton.tsx

@@ -4,53 +4,76 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { debounce } from 'lodash-es';
 
 import { ActionButton, Input, Popover, PopoverContent, PopoverTrigger } from '@/components';
+import { type GifItem, serviceGetTrendingGiphy, serviceGetTrendingTenor, serviceSearchGiphy, serviceSearchTenor } from '@/extensions/ImageGif/components/services';
 
 interface IProps {
   showClear?: boolean
   selectImage: (arg: string) => void
   children: React.ReactNode
-  giphyApiKey: string
+  apiKey: string
+  provider: string;
 }
 
-function ImageGifWrap({ selectImage, giphyApiKey, children }: IProps) {
-  const [gifs, setGifs] = useState([]);
-  const [limit] = useState(15);
+function useServiceGif (provider: string, apiKey: string) {
 
-  const inputRef = useRef(null);
+  const searchTrending = async (): Promise<GifItem[]> => {
+    if (!apiKey) return [];
+
+    if (provider === 'giphy') {
+      return serviceGetTrendingGiphy(apiKey);
+    }
 
-  const search = (term: any, kind: any = 'search') => {
-    if (!giphyApiKey) {
-      return;
+    if (provider === 'tenor') {
+      return serviceGetTrendingTenor(apiKey);
     }
 
-    const url
-      = kind === 'search'
-        ? `https://api.giphy.com/v1/gifs/search?q=${term}`
-        : `https://api.giphy.com/v1/gifs/trending?q=${term}`;
-    const link = `${url}&limit=${limit}&api_key=${giphyApiKey}`;
-
-    fetch(link).then(r => r.json()).then((response) => {
-      // handle success
-      setGifs(response.data);
-    })
-      .catch((error) => {
-        // handle error
-        console.log(error);
-      });
+    return [];
   };
 
+  const searchWord = async (word: string): Promise<GifItem[]> => {
+    if (!apiKey) return [];
+
+    if (provider === 'giphy') {
+      return serviceSearchGiphy(word, apiKey);
+    }
+
+    if (provider === 'tenor') {
+      return serviceSearchTenor(word, apiKey);
+    }
+
+    return [];
+  };
+
+return {
+  searchTrending,
+  searchWord
+};
+}
+
+function ImageGifWrap({ selectImage, apiKey, provider, children }: IProps) {
+  const [gifs, setGifs] = useState<GifItem[]>([]);
+
+  const inputRef = useRef(null);
+
+  const { searchTrending, searchWord } = useServiceGif(provider, apiKey);
+
   useEffect(() => {
-    search('', 'trend');
+    (async () => {
+      const r = await searchTrending();
+      setGifs(r);
+    })();
   }, []);
 
   const handleInputChange = useCallback(
-    debounce((event: React.ChangeEvent<HTMLInputElement>) => {
+    debounce(async (event: React.ChangeEvent<HTMLInputElement>) => {
       if (!event.target.value) {
-        search('', 'trend');
+        const r = await searchTrending();
+        setGifs(r);
         return;
       }
       // Add your logic here
-      search(event.target.value);
+      const r = await  searchWord(event.target.value);
+      setGifs(r);
     }, 350), // Adjust the debounce delay as needed
     [],
   );
@@ -68,7 +91,7 @@ function ImageGifWrap({ selectImage, giphyApiKey, children }: IProps) {
       >
 
         {
-          giphyApiKey
+          apiKey
             ? (
               <>
                 <div className="richtext-mb-[10px] richtext-w-full">
@@ -84,15 +107,15 @@ function ImageGifWrap({ selectImage, giphyApiKey, children }: IProps) {
                   <div className="richtext-grid richtext-grid-cols-2 richtext-gap-1 ">
 
                     {gifs?.length
-                      ? gifs?.map((o: any) => (
+                      ? gifs?.map((item) => (
                         <img
-                          alt="giphy"
+                          alt=''
                           className="richtext-cursor-pointer richtext-text-center"
-                          height={o.images.fixed_width_downsampled.height}
-                          key={`giphy-${o.id}`}
-                          onClick={() => selectImage(o)}
-                          src={o.images.fixed_width_downsampled.url}
-                          width={o.images.fixed_width_downsampled.width}
+                          height={item.height}
+                          key={item.id}
+                          onClick={() => selectImage(item.src)}
+                          src={item.src}
+                          width={item.width}
                         />
                       ))
                       : <p>
@@ -115,16 +138,15 @@ function ImageGifWrap({ selectImage, giphyApiKey, children }: IProps) {
   );
 }
 
-export function ImageGifActionButton({ editor, icon, giphyApiKey, ...props }: any) {
-  const selectImage = (giphyblock: any) => {
-    const { url } = giphyblock.images.original;
-
-    editor.chain().focus().setImageGif({ src: url }).run();
+export function ImageGifActionButton({ editor, icon, provider, apiKey, ...props }: any) {
+  const selectImage = (src: string) => {
+    editor.chain().focus().setImageGif({ src }).run();
   };
 
   return (
     <ImageGifWrap
-      giphyApiKey={giphyApiKey}
+      apiKey={apiKey}
+      provider={provider}
       selectImage={selectImage}
     >
       <ActionButton