fix: show image, video dialog with slash command

Author: hunghg255

src/components/Bubble/RichTextBubbleExcalidraw.tsx

@@ -3,14 +3,15 @@ import { useCallback, useEffect } from 'react';
 import { BubbleMenu } from '@tiptap/react/menus';
 
 import { ActionButton } from '@/components/ActionButton';
+import { emit } from '@/components/ReactBus';
 import { SizeSetter } from '@/components/SizeSetter/SizeSetter';
 import type { IExcalidrawAttrs } from '@/extensions/Excalidraw';
 import { Excalidraw } from '@/extensions/Excalidraw';
 import { useAttributes } from '@/hooks/useAttributes';
 import { useLocale } from '@/locales';
 import { useEditorInstance } from '@/store/editor';
 import { useEditableEditor } from '@/store/store';
-import { triggerOpenExcalidrawSettingModal } from '@/utils/_event';
+import { EVENTS } from '@/utils/customEvents/events.constant';
 import { deleteNode } from '@/utils/delete-node';
 import { getEditorContainerDOMSize } from '@/utils/editor-container-size';
 
@@ -39,9 +40,12 @@ export function RichTextBubbleExcalidraw() {
     },
     [editor],
   );
+
   const openEditLinkModal = useCallback(() => {
-    triggerOpenExcalidrawSettingModal({ ...attrs, editor });
+    const EVENT_ID = EVENTS.EXCALIDRAW((editor as any).id);
+    emit(EVENT_ID, attrs);
   }, [editor, attrs]);
+
   const shouldShow = useCallback(() => editor.isActive(Excalidraw.name), [editor]);
   const deleteMe = useCallback(() => deleteNode(Excalidraw.name, editor), [editor]);
 

src/components/ReactBus.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import mitt from '@/utils/mitt';
+
+const iMitt = mitt();
+
+export const BusContext = React.createContext(iMitt);
+
+export const useBus = () => React.useContext(BusContext);
+
+export function useListener(fn: (event: any) => void, events: string[]) {
+  const bus = useBus();
+
+  React.useEffect(() => {
+    events.map(e => bus.on(e, fn));
+    return () => {
+      events.map(e => bus.off(e, fn));
+    };
+  }, [bus, events, fn]);
+}
+
+export const emit = iMitt.emit;
+
+export function ReactBusProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <BusContext.Provider value={iMitt}>
+      {children}
+    </BusContext.Provider>
+  );
+}

src/components/RichTextProvider.tsx

@@ -4,6 +4,8 @@ import { type Editor } from '@tiptap/core';
 import { EditorContext } from '@tiptap/react';
 
 import { TooltipProvider } from '@/components';
+import { ReactBusProvider } from '@/components/ReactBus';
+import SlashDialogTrigger from '@/components/SlashDialogTrigger/SlashDialogTrigger';
 import { RESET_CSS } from '@/constants/resetCSS';
 import { EditorEditableReactive } from '@/store/EditorEditableReactive';
 import { ThemeColorReactive } from '@/store/ThemeColorReactive';
@@ -40,19 +42,22 @@ export function RichTextProvider({ editor, children }: IProviderRichTextProps) {
 
   return (
     <div className="reactjs-tiptap-editor">
-      <EditorContext.Provider value={{ editor }}>
-        <TooltipProvider delayDuration={0}
-          disableHoverableContent
-        >
-          {children}
-        </TooltipProvider>
-
-        <EditorEditableReactive
-          editor={editor}
-        />
-
-        <ThemeColorReactive />
-      </EditorContext.Provider>
+      <ReactBusProvider>
+        <EditorContext.Provider value={{ editor }}>
+          <TooltipProvider delayDuration={0}
+            disableHoverableContent
+          >
+            {children}
+          </TooltipProvider>
+
+          <EditorEditableReactive
+            editor={editor}
+          />
+
+          <SlashDialogTrigger />
+          <ThemeColorReactive />
+        </EditorContext.Provider>
+      </ReactBusProvider>
     </div>
   );
 }

src/components/SlashDialogTrigger/RenderDialogUploadImage.tsx

@@ -0,0 +1,272 @@
+import { useMemo, useRef, useState } from 'react';
+
+import { Button, Checkbox, IconComponent, Input, Label, Tabs, TabsContent, TabsList, TabsTrigger, useToast } from '@/components';
+import { useListener } from '@/components/ReactBus';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { ImageCropper } from '@/extensions/Image/components/ImageCropper';
+import { Image } from '@/extensions/Image/Image';
+import { useToggleActive } from '@/hooks/useActive';
+// import { useButtonProps } from '@/hooks/useButtonProps';
+import { useExtension } from '@/hooks/useExtension';
+import { useLocale } from '@/locales';
+import { useEditorInstance } from '@/store/editor';
+import { EVENTS } from '@/utils/customEvents/events.constant';
+import { validateFiles } from '@/utils/validateFile';
+
+export function RenderDialogUploadImage () {
+  const { t } = useLocale();
+  const { toast } = useToast();
+
+  const editor = useEditorInstance();
+  // const buttonProps = useButtonProps(Image.name);
+
+  // const {
+  //   icon,
+  //   tooltip,
+  // } = buttonProps?.componentProps ?? {};
+
+  const { editorDisabled } = useToggleActive();
+
+  const [open, setOpen] = useState(false);
+
+  const EVENT_ID = EVENTS.UPLOAD_IMAGE((editor as any).id);
+
+  useListener(setOpen, [EVENT_ID]);
+
+  const [isUploading, setIsUploading] = useState(false);
+  const extension = useExtension(Image.name);
+
+  const [link, setLink] = useState<string>('');
+  const [alt, setAlt] = useState<string>('');
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  const defaultInline = extension?.options.defaultInline || false;
+
+  const [imageInline, setImageInline] = useState(defaultInline);
+
+  const uploadOptions = useMemo(() => {
+    const uploadOptions = extension?.options;
+
+    return uploadOptions;
+  }, [extension]);
+
+  async function handleFile(event: any) {
+    const files = event?.target?.files;
+    if (!editor || editor.isDestroyed || files.length === 0 || isUploading) {
+      event.target.value = '';
+      return;
+    }
+
+    const validFiles = validateFiles(files, {
+      acceptMimes: uploadOptions?.acceptMimes,
+      maxSize: uploadOptions?.maxSize,
+      t,
+      toast,
+      onError: uploadOptions.onError,
+    });
+
+    if (validFiles.length <= 0) {
+      event.target.value = '';
+      return;
+    }
+
+    setIsUploading(true);
+    try {
+      if (uploadOptions?.multiple) {
+        // Handle multiple files upload
+        const uploadPromises = validFiles.map(async (file) => {
+          let src = '';
+          if (uploadOptions.upload) {
+            src = await uploadOptions.upload(file);
+          } else {
+            src = URL.createObjectURL(file);
+          }
+          return src;
+        });
+
+        const srcs = await Promise.all(uploadPromises);
+        // Insert all images (you might want to adjust this based on your editor's capabilities)
+        srcs.forEach(src => {
+          editor.chain().focus().setImageInline({ src, inline: imageInline, alt }).run();
+        });
+      } else {
+        // Single file upload (take the first valid file)
+        const file = validFiles[0];
+        let src = '';
+        if (uploadOptions.upload) {
+          src = await uploadOptions.upload(file);
+        } else {
+          src = URL.createObjectURL(file);
+        }
+        editor.chain().focus().setImageInline({ src, inline: imageInline, alt }).run();
+      }
+
+      setOpen(false);
+      setAlt('');
+      setImageInline(defaultInline);
+    } catch (error) {
+      console.error('Error uploading image', error);
+      if (uploadOptions.onError) {
+        uploadOptions.onError({
+          type: 'upload',
+          message: t('editor.upload.error'),
+        });
+      } else {
+        toast({
+          variant: 'destructive',
+          title: t('editor.upload.error'),
+        });
+      }
+    } finally {
+      setIsUploading(false);
+      event.target.value = '';
+    }
+  }
+
+  function handleLink(e: any) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    editor.chain().focus().setImageInline({ src: link, inline: imageInline, alt }).run();
+    setOpen(false);
+    setImageInline(defaultInline);
+    setLink('');
+    setAlt('');
+  }
+
+  function handleClick(e: any) {
+    e.preventDefault();
+    fileInput.current?.click();
+  }
+
+  if (editorDisabled) {
+    return <></>;
+  }
+
+  return (
+    <Dialog
+      onOpenChange={setOpen}
+      open={open}
+    >
+      <DialogContent>
+        <DialogTitle>
+          {t('editor.image.dialog.title')}
+        </DialogTitle>
+
+        <Tabs
+          activationMode="manual"
+          defaultValue={
+            uploadOptions.resourceImage === 'both' || uploadOptions.resourceImage === 'upload'
+              ? 'upload'
+              : 'link'
+          }
+        >
+
+          {(uploadOptions.resourceImage === 'both') && (
+            <TabsList className="richtext-grid richtext-w-full richtext-grid-cols-2">
+              <TabsTrigger value="upload">
+                {t('editor.image.dialog.tab.upload')}
+              </TabsTrigger>
+
+              <TabsTrigger value="link">
+                {t('editor.image.dialog.tab.url')}
+              </TabsTrigger>
+            </TabsList>
+          )}
+
+          <div className="richtext-my-[10px] richtext-flex richtext-items-center richtext-gap-[4px]">
+            <Checkbox
+              checked={imageInline}
+              onCheckedChange={(v) => {
+                setImageInline(v as boolean);
+              }}
+            />
+
+            <Label>
+              {t('editor.link.dialog.inline')}
+            </Label>
+          </div>
+
+          {
+            uploadOptions.enableAlt && (
+              <div className="richtext-my-[10px] ">
+                <Label className="mb-[6px]">
+                  {t('editor.imageUpload.alt')}
+                </Label>
+
+                <Input
+                  onChange={(e) => setAlt(e.target.value)}
+                  required
+                  type="text"
+                  value={alt}
+                />
+              </div>
+            )
+          }
+
+          <TabsContent value="upload">
+            <div className="richtext-flex richtext-items-center richtext-gap-[10px]">
+              <Button className="richtext-mt-1 richtext-w-full"
+                disabled={isUploading}
+                onClick={handleClick}
+                size="sm"
+              >
+                {isUploading ? (
+                  <>
+                    {t('editor.imageUpload.uploading')}
+
+                    <IconComponent
+                      className="richtext-ml-1 richtext-animate-spin"
+                      name="Loader"
+                    />
+                  </>
+                ) : (
+                  t('editor.image.dialog.tab.upload')
+                )}
+              </Button>
+
+              <ImageCropper
+                alt={alt}
+                disabled={isUploading}
+                editor={editor}
+                imageInline={imageInline}
+                onClose={() => {
+                  setAlt('');
+                }}
+              />
+            </div>
+
+            <input
+              // accept="image/*"
+              accept={uploadOptions.acceptMimes.join(',') || 'image/*'}
+              multiple={uploadOptions.multiple}
+              onChange={handleFile}
+              ref={fileInput}
+              style={{ display: 'none' }}
+              type="file"
+            />
+          </TabsContent>
+
+          <TabsContent value="link">
+            <form onSubmit={handleLink}>
+              <div className="richtext-flex richtext-items-center richtext-gap-2">
+                <Input
+                  autoFocus
+                  onChange={e => setLink(e.target.value)}
+                  placeholder={t('editor.image.dialog.placeholder')}
+                  required
+                  type="url"
+                  value={link}
+                />
+
+                <Button type="submit">
+                  {t('editor.image.dialog.button.apply')}
+                </Button>
+              </div>
+            </form>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}