chore: update upload image

Author: hunghg255

docs/extensions/Image/index.md

@@ -14,6 +14,7 @@ next:
 
 ```tsx
 import { Image } from 'reactjs-tiptap-editor/extension-bundle'; // [!code ++]
+import 'react-image-crop/dist/ReactCrop.css'; // [!code ++]
 
 const extensions = [
   ...,

src/components/BubbleMenu.tsx

@@ -7,7 +7,7 @@ import { BubbleMenuIframe } from '@/components/menus/components/BubbleMenuIframe
 import BubbleMenuKatex from '@/components/menus/components/BubbleMenuKatex';
 import { BubbleMenuMermaid } from '@/components/menus/components/BubbleMenuMermaid';
 import { BubbleMenuTwitter } from '@/components/menus/components/BubbleMenuTwitter';
-import { ImageGif } from '@/extensions';
+import { Image, ImageGif } from '@/extensions';
 import type { BubbleMenuProps as BubbleMenuPropsType } from '@/types';
 
 export interface BubbleMenuComponentProps {
@@ -38,7 +38,7 @@ export function BubbleMenu({ editor, disabled, bubbleMenu }: BubbleMenuComponent
       editor={editor}
       key="link"
     /> : null,
-    extensionsNames.includes('image') && !bubbleMenu?.imageConfig?.hidden ? <BubbleMenuImage disabled={disabled}
+    extensionsNames.includes(Image.name) && !bubbleMenu?.imageConfig?.hidden ? <BubbleMenuImage disabled={disabled}
       editor={editor}
       key="image"
     /> : null,

src/components/menus/components/BubbleMenuMedia.tsx

@@ -4,7 +4,7 @@ import type { Editor } from '@tiptap/react';
 import { BubbleMenu as BubbleMenuReact } from '@tiptap/react';
 
 import { Separator, getBubbleImage, getBubbleImageGif, getBubbleVideo } from '@/components';
-import { ImageGif } from '@/extensions';
+import { Image, ImageGif, Video } from '@/extensions';
 import { useLocale } from '@/locales';
 
 interface IPropsBubbleMenu {
@@ -46,15 +46,15 @@ function ItemA({ item, disabled, editor }: any) {
 }
 
 function isImageNode(node: any) {
-  return node.type.name === 'image';
+  return node.type.name === Image.name;
 }
 
 function isImageGifNode(node: any) {
   return node.type.name === ImageGif.name;
 }
 
 function isVideoNode(node: any) {
-  return node.type.name === 'video';
+  return node.type.name === Video.name;
 }
 
 function BubbleMenuImage(props: IPropsBubbleMenu) {

src/extensions/Image/components/ActionImageButton.tsx

@@ -1,16 +1,22 @@
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 
 import { ActionButton, Button, Checkbox, Input, Label, Tabs, TabsContent, TabsList, TabsTrigger } from '@/components';
 import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { ImageCropper } from '@/extensions/Image/components/ImageCropper';
 import Image from '@/extensions/Image/Image';
-import { actionDialogImage, useDialogImage } from '@/extensions/Image/store';
+import { actionDialogImage } from '@/extensions/Image/store';
 import { useLocale } from '@/locales';
+import { listenEvent } from '@/utils/customEvents/customEvents';
+import { eventName } from '@/utils/customEvents/events.constant';
 
 function ActionImageButton(props: any) {
   const { t } = useLocale();
+  const id = useId();
+  const [open, setOpen] = useState(false);
 
-  const dialogImage = useDialogImage();
+  const handleUploadImage = (evt: any) => {
+    setOpen(evt.detail);
+  };
 
   const [link, setLink] = useState<string>('');
   const fileInput = useRef<HTMLInputElement>(null);
@@ -27,6 +33,16 @@ function ActionImageButton(props: any) {
     return uploadOptions;
   }, [props.editor]);
 
+  useEffect(() => {
+    eventName.setEventNameUploadImage(id);
+
+    const rm1 = listenEvent(eventName.getEventNameUploadImage(), handleUploadImage);
+
+    return () => {
+      rm1();
+    };
+  }, []);
+
   async function handleFile(event: any) {
     const files = event?.target?.files;
     if (!props.editor || props.editor.isDestroyed || files.length === 0) {
@@ -43,15 +59,15 @@ function ActionImageButton(props: any) {
     }
 
     props.editor.chain().focus().setImageInline({ src, inline: imageInline }).run();
-    actionDialogImage.setOpen(false);
+    setOpen(false);
     setImageInline(false);
   }
   function handleLink(e: any) {
     e.preventDefault();
     e.stopPropagation();
 
     props.editor.chain().focus().setImageInline({ src: link, inline: imageInline }).run();
-    actionDialogImage.setOpen(false);
+    setOpen(false);
     setImageInline(false);
     setLink('');
   }
@@ -62,12 +78,13 @@ function ActionImageButton(props: any) {
   }
 
   return (
-    <Dialog onOpenChange={actionDialogImage.setOpen}
-      open={dialogImage}
+    <Dialog
+      onOpenChange={setOpen}
+      open={open}
     >
       <DialogTrigger asChild>
         <ActionButton
-          action={() => actionDialogImage.setOpen(true)}
+          action={() => setOpen(true)}
           icon={props.icon}
           tooltip={props.tooltip}
         />

src/extensions/Image/components/ImageCropper.tsx

@@ -5,6 +5,7 @@ import ReactCrop, {
   type PixelCrop,
 } from 'react-image-crop';
 
+import { IconComponent } from '@/components';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -13,12 +14,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import { Image as ExtensionImage } from '@/extensions';
 import { useLocale } from '@/locales';
 import { dataURLtoFile, readImageAsBase64 } from '@/utils/file';
 
-import 'react-image-crop/dist/ReactCrop.css';
-import { IconComponent } from '@/components';
-
 export function ImageCropper({ editor, imageInline, onClose }: any) {
   const { t } = useLocale();
 
@@ -75,7 +74,7 @@ export function ImageCropper({ editor, imageInline, onClose }: any) {
       const fileCrop = dataURLtoFile(croppedImageUrl, urlUpload?.file?.name || 'image.png');
 
       const uploadOptions = editor.extensionManager.extensions.find(
-        (extension: any) => extension.name === 'image',
+        (extension: any) => extension.name === ExtensionImage.name,
       )?.options;
 
       let src = '';

src/extensions/SlashCommand/groups.ts

@@ -1,10 +1,11 @@
 import type { Extensions } from '@tiptap/core';
 
-import type { Group } from './types';
-import type { HeadingOptions } from '@/extensions';
-import { localeActions } from '@/locales';
+import { Image, Video, type HeadingOptions } from '@/extensions';
 import { actionDialogImage } from '@/extensions/Image/store';
 import { actionDialogVideo } from '@/extensions/Video/store';
+import { localeActions } from '@/locales';
+
+import type { Group } from './types';
 
 export function renderGroups(extensions: Extensions) {
   const groups: Group[] = [
@@ -100,7 +101,7 @@ export function renderGroups(extensions: Extensions) {
     }
 
     /* Insert */
-    if (extension.name.toLowerCase() === 'image') {
+    if (extension.name.toLowerCase() === Image.name) {
       groups[1].commands.push({
         name: 'image',
         label: localeActions.t('editor.image.tooltip'),
@@ -115,7 +116,7 @@ export function renderGroups(extensions: Extensions) {
       });
     }
 
-    if (extension.name.toLowerCase() === 'video') {
+    if (extension.name.toLowerCase() === Video.name) {
       groups[1].commands.push({
         name: 'video',
         label: localeActions.t('editor.video.tooltip'),

src/extensions/Video/components/ActiveVideoButton.tsx

@@ -1,10 +1,11 @@
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 
 import { ActionButton, Button, Input, Tabs, TabsContent, TabsList, TabsTrigger } from '@/components';
 import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { useLocale } from '@/locales';
-import { actionDialogVideo, useDialogVideo } from '@/extensions/Video/store';
 import { Video } from '@/extensions/Video/Video';
+import { useLocale } from '@/locales';
+import { listenEvent } from '@/utils/customEvents/customEvents';
+import { eventName } from '@/utils/customEvents/events.constant';
 
 function checkIsVideo(url: string) {
   return /\.(?:mp4|webm|ogg|mov)$/i.test(url);
@@ -16,8 +17,23 @@ function ActionVideoButton(props: any) {
   const [link, setLink] = useState<string>('');
   const fileInput = useRef<HTMLInputElement>(null);
 
-  const dialogVideo = useDialogVideo();
   const [error, setError] = useState<string>('');
+  const id = useId();
+  const [open, setOpen] = useState(false);
+
+  const handleUploadVideo = (evt: any) => {
+    setOpen(evt.detail);
+  };
+
+  useEffect(() => {
+    eventName.setEventNameUploadVideo(id);
+
+    const rm1 = listenEvent(eventName.getEventNameUploadVideo(), handleUploadVideo);
+
+    return () => {
+      rm1();
+    };
+  }, []);
 
   const uploadOptions = useMemo(() => {
     const uploadOptions = props.editor.extensionManager.extensions.find(
@@ -43,13 +59,13 @@ function ActionVideoButton(props: any) {
 
     props.editor
       .chain()
+      .focus()
       .setVideo({
         src,
         width: '100%',
       })
-      .focus()
       .run();
-    actionDialogVideo.setOpen(false);
+    setOpen(false);
   }
   function handleLink(e: any) {
     e.preventDefault();
@@ -61,13 +77,13 @@ function ActionVideoButton(props: any) {
 
     props.editor
       .chain()
+      .focus()
       .setVideo({
         src: link,
         width: '100%',
       })
-      .focus()
       .run();
-    actionDialogVideo.setOpen(false);
+    setOpen(false);
   }
 
   function handleClick(e: any) {
@@ -76,11 +92,13 @@ function ActionVideoButton(props: any) {
   }
 
   return (
-    <Dialog open={dialogVideo} onOpenChange={actionDialogVideo.setOpen}>
+    <Dialog onOpenChange={setOpen}
+      open={open}
+    >
       <DialogTrigger asChild>
         <ActionButton
+          action={() => setOpen(true)}
           icon={props.icon}
-          action={() => actionDialogVideo.setOpen(true)}
           tooltip={props.tooltip}
         />
       </DialogTrigger>
@@ -91,17 +109,18 @@ function ActionVideoButton(props: any) {
         </DialogTitle>
 
         <Tabs
+          activationMode="manual"
           defaultValue={
             (uploadOptions?.resourceVideo === 'both' || uploadOptions?.resourceVideo === 'upload') ? 'upload' : 'link'
           }
-          activationMode="manual"
         >
           <TabsList className="richtext-grid richtext-w-full richtext-grid-cols-2">
             {(uploadOptions?.resourceVideo === 'both' || uploadOptions?.resourceVideo === 'upload') && (
               <TabsTrigger value="upload">
                 {t('editor.video.dialog.tab.upload')}
               </TabsTrigger>
             )}
+
             {(uploadOptions?.resourceVideo === 'both' || uploadOptions?.resourceVideo === 'link') && (
               <TabsTrigger value="link">
                 {t('editor.video.dialog.link')}
@@ -111,27 +130,34 @@ function ActionVideoButton(props: any) {
 
           <TabsContent value="upload">
             <div className="richtext-flex richtext-items-center richtext-gap-[10px]">
-              <Button className="richtext-w-full richtext-mt-1" size="sm" onClick={handleClick}>
+              <Button className="richtext-mt-1 richtext-w-full"
+                onClick={handleClick}
+                size="sm"
+              >
                 {t('editor.video.dialog.tab.upload')}
               </Button>
             </div>
+
             <input
-              type="file"
               accept="video/*"
-              ref={fileInput}
               multiple
+              onChange={handleFile}
+              ref={fileInput}
+              type="file"
               style={{
                 display: 'none',
               }}
-              onChange={handleFile}
             />
           </TabsContent>
+
           <TabsContent value="link">
             <form onSubmit={handleLink}>
               <div className="richtext-flex richtext-items-center richtext-gap-2">
                 <Input
-                  type="url"
                   autoFocus
+                  placeholder={t('editor.video.dialog.placeholder')}
+                  required
+                  type="url"
                   value={link}
                   onChange={(e) => {
                     const url = e.target.value;
@@ -146,16 +172,15 @@ function ActionVideoButton(props: any) {
                     setError('');
                     setLink(url);
                   }}
-                  required
-                  placeholder={t('editor.video.dialog.placeholder')}
                 />
 
                 <Button type="submit">
                   {t('editor.video.dialog.button.apply')}
                 </Button>
               </div>
             </form>
-            {error && <div className="richtext-text-red-500 richtext-my-[5px]">
+
+            {error && <div className="richtext-my-[5px] richtext-text-red-500">
               {error}
             </div>}
           </TabsContent>