reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

package/src/extensions/Image/Image.ts

@@ -0,0 +1,303 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { mergeAttributes } from '@tiptap/core';
+import TiptapImage from '@tiptap/extension-image';
+import { Plugin } from '@tiptap/pm/state';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+import ActionImageButton from '@/extensions/Image/components/ActionImageButton';
+import ImageView from '@/extensions/Image/components/ImageView';
+import { UploadImagesPlugin, createImageUpload, handleImageDrop, handleImagePaste } from '@/plugins/image-upload';
+import type { GeneralOptions } from '@/types';
+
+export interface SetImageAttrsOptions {
+  src?: string
+  /** The alternative text for the image. */
+  alt?: string
+  /** The caption of the image. */
+  caption?: string
+  /** The width of the image. */
+  width?: number | string | null
+  /** The alignment of the image. */
+  align?: 'left' | 'center' | 'right'
+  /** Whether the image is inline. */
+  inline?: boolean
+  /** image FlipX */
+  flipX?: boolean
+  /** image FlipY */
+  flipY?: boolean
+}
+
+const DEFAULT_OPTIONS: any = {
+  acceptMimes: ['image/jpeg', 'image/gif', 'image/png', 'image/jpg'],
+  maxSize: 1024 * 1024 * 5, // 5MB
+  resourceImage: 'both',
+  defaultInline: false,
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    imageUpload: {
+      /**
+       * Add an image
+       */
+      setImageInline: (options: Partial<SetImageAttrsOptions>) => ReturnType
+      /**
+       * Update an image
+       */
+      updateImage: (options: Partial<SetImageAttrsOptions>) => ReturnType
+      /**
+       * Set image alignment
+       */
+      setAlignImage: (align: 'left' | 'center' | 'right') => ReturnType
+    }
+  }
+}
+
+export interface IImageOptions extends GeneralOptions<IImageOptions> {
+  /** Function for uploading files */
+  upload?: (file: File) => Promise<string>
+
+  HTMLAttributes?: any
+
+  acceptMimes?: string[]
+  maxSize?: number
+
+  /** The source URL of the image */
+  resourceImage: 'upload' | 'link' | 'both'
+  defaultInline?: boolean
+}
+
+export const Image = TiptapImage.extend<IImageOptions>({
+  group: 'inline',
+  inline: true,
+  defining: true,
+  draggable: true,
+  selectable: true,
+
+  addOptions() {
+    return {
+      ...DEFAULT_OPTIONS,
+      ...this.parent?.(),
+      upload: () => Promise.reject('Image Upload Function'),
+      button: ({
+        editor,
+        extension,
+        t,
+      }: {
+        editor: any
+        extension: any
+        t: (key: string) => string
+      }) => ({
+        component: ActionImageButton,
+        componentProps: {
+          action: () => {
+            return true;
+          },
+          upload: extension.options.upload,
+          /* If setImage is not available(when Image Component is not imported), the button is disabled */
+          disabled: !editor.can().setImage?.({}),
+          icon: 'ImageUp',
+          tooltip: t('editor.image.tooltip'),
+          editor,
+        },
+      }),
+    };
+  },
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      flipX: {
+        default: false,
+      },
+      flipY: {
+        default: false,
+      },
+      width: {
+        default: null,
+        parseHTML: (element) => {
+          const width = element.style.width || element.getAttribute('width') || null;
+          return !width ? null : Number.parseInt(width, 10);
+        },
+        renderHTML: (attributes) => {
+          return {
+            width: attributes.width,
+          };
+        },
+      },
+      align: {
+        default: 'center',
+        parseHTML: element => element.getAttribute('align'),
+        renderHTML: (attributes) => {
+          return {
+            align: attributes.align,
+          };
+        },
+      },
+      inline: {
+        default: false,
+        parseHTML: element => Boolean(element.getAttribute('inline')),
+        renderHTML: (attributes) => {
+          return {
+            inline: attributes.inline,
+          };
+        },
+      },
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageView);
+  },
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      setImageInline: (options: any) => ({ commands }: any) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: {
+            ...options,
+            inline: options.inline ?? this.options.defaultInline,
+          },
+        });
+      },
+      updateImage:
+        options =>
+          ({ commands }) => {
+            return commands.updateAttributes(this.name, options);
+          },
+      setAlignImage:
+          align =>
+            ({ commands }) => {
+              return commands.updateAttributes(this.name, { align });
+            },
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    const { flipX, flipY, align, inline } = HTMLAttributes;
+
+    const transformStyle
+      = flipX || flipY ? `transform: rotateX(${flipX ? '180' : '0'}deg) rotateY(${flipY ? '180' : '0'}deg);` : '';
+
+    const textAlignStyle = align ? `text-align: ${align};` : '';
+
+    return [
+      inline ? 'span' : 'div',
+      {
+        style: textAlignStyle,
+        class: 'image',
+      },
+      [
+        'img',
+        mergeAttributes(
+          {
+            height: 'auto',
+            style: transformStyle,
+          },
+          this.options.HTMLAttributes,
+          HTMLAttributes,
+        ),
+      ],
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'span.image img',
+        getAttrs: (img) => {
+          const element = img?.parentElement;
+
+          const width = img?.getAttribute('width');
+
+          const flipX = img?.getAttribute('flipx') || false;
+          const flipY = img?.getAttribute('flipy') || false;
+
+          return {
+            src: img?.getAttribute('src'),
+            alt: img?.getAttribute('alt'),
+            caption: img?.getAttribute('caption'),
+            width: width ? Number.parseInt(width, 10) : null,
+            align: img?.getAttribute('align') || element?.style?.textAlign || null,
+            inline: img?.getAttribute('inline') || false,
+            flipX: flipX === 'true',
+            flipY: flipY === 'true',
+          };
+        },
+      },
+      {
+        tag: 'div[class=image]',
+        getAttrs: (element) => {
+          const img = element.querySelector('img');
+
+          const width = img?.getAttribute('width');
+          const flipX = img?.getAttribute('flipx') || false;
+          const flipY = img?.getAttribute('flipy') || false;
+
+          return {
+            src: img?.getAttribute('src'),
+            alt: img?.getAttribute('alt'),
+            caption: img?.getAttribute('caption'),
+            width: width ? Number.parseInt(width, 10) : null,
+            align: img?.getAttribute('align') || element.style.textAlign || null,
+            inline: img?.getAttribute('inline') || false,
+            flipX: flipX === 'true',
+            flipY: flipY === 'true',
+          };
+        },
+      },
+    ];
+  },
+  addProseMirrorPlugins() {
+    const validateFile = (file: File): boolean => {
+      // @ts-expect-error
+      if (!this.options.acceptMimes.includes(file.type)) {
+        // toast({ description: t.value('editor.imageUpload.fileTypeNotSupported'), duration: 2000 });
+        return false;
+      }
+      // @ts-expect-error
+      if (file.size > this.options.maxSize) {
+        // toast({
+        //   description: `${t.value('editor.imageUpload.fileSizeTooBig')} ${formatFileSize(
+        //     this.options.maxSize,
+        //   )}.`,
+        //   duration: 2000,
+        // });
+        return false;
+      }
+      return true;
+    };
+
+    const uploadFn = createImageUpload({
+      validateFn: validateFile,
+      onUpload: this.options.upload as any,
+      // postUpload: this.options.postUpload,
+      defaultInline: this.options.defaultInline,
+    });
+
+    return [
+      new Plugin({
+        props: {
+          handlePaste: (view, event) => {
+            if (!event.clipboardData) {
+              return false;
+            }
+            const items = [...(event.clipboardData.files || [])];
+            if (items.some(x => x.type === 'text/html')) {
+              return false;
+            }
+            return handleImagePaste(view, event, uploadFn);
+          },
+          handleDrop: (view, event, _, moved) => {
+            if (!(event instanceof DragEvent) || !event.dataTransfer) {
+              return false;
+            }
+            handleImageDrop(view, event, moved, uploadFn);
+            return false;
+          },
+        },
+      }),
+      UploadImagesPlugin(),
+    ];
+  },
+});
+
+export default Image;

package/src/extensions/Image/components/ActionImageButton.tsx

@@ -0,0 +1,186 @@
+import { useEffect, 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 } from '@/extensions/Image/store';
+import { useLocale } from '@/locales';
+import { listenEvent } from '@/utils/customEvents/customEvents';
+import { EVENTS } from '@/utils/customEvents/events.constant';
+
+function ActionImageButton(props: any) {
+  const { t } = useLocale();
+  const [open, setOpen] = useState(false);
+
+  const handleUploadImage = (evt: any) => {
+    setOpen(evt.detail);
+  };
+
+  const [link, setLink] = useState<string>('');
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  const [imageInline, setImageInline] = useState(props.editor.extensionManager.extensions.find(
+    (extension: any) => extension.name === Image.name,
+  )?.options.defaultInline || false);
+
+  const uploadOptions = useMemo(() => {
+    const uploadOptions = props.editor.extensionManager.extensions.find(
+      (extension: any) => extension.name === Image.name,
+    )?.options;
+
+    return uploadOptions;
+  }, [props.editor]);
+
+  useEffect(() => {
+    const rm1 = listenEvent(EVENTS.UPLOAD_IMAGE(props.editor.id), handleUploadImage);
+
+    return () => {
+      rm1();
+    };
+  }, []);
+
+  async function handleFile(event: any) {
+    const files = event?.target?.files;
+    if (!props.editor || props.editor.isDestroyed || files.length === 0) {
+      return;
+    }
+
+    const file = files[0];
+
+    let src = '';
+    if (uploadOptions.upload) {
+      src = await uploadOptions.upload(file);
+    } else {
+      src = URL.createObjectURL(file);
+    }
+
+    props.editor.chain().focus().setImageInline({ src, inline: imageInline }).run();
+    setOpen(false);
+    setImageInline(false);
+  }
+  function handleLink(e: any) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    props.editor.chain().focus().setImageInline({ src: link, inline: imageInline }).run();
+    setOpen(false);
+    setImageInline(false);
+    setLink('');
+  }
+
+  function handleClick(e: any) {
+    e.preventDefault();
+    fileInput.current?.click();
+  }
+
+  return (
+    <Dialog
+      onOpenChange={setOpen}
+      open={open}
+    >
+      <DialogTrigger asChild>
+        <ActionButton
+          action={() => setOpen(true)}
+          icon={props.icon}
+          tooltip={props.tooltip}
+        />
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogTitle>
+          {t('editor.image.dialog.title')}
+        </DialogTitle>
+
+        <Tabs
+          activationMode="manual"
+          defaultValue={
+            uploadOptions.resourceImage === 'both' || uploadOptions.resourceImage === 'upload'
+              ? 'upload'
+              : 'link'
+          }
+        >
+          <TabsList className="grid w-full grid-cols-2">
+            {uploadOptions.resourceImage === 'both' || uploadOptions.resourceImage === 'upload'
+              ? (
+                <TabsTrigger value="upload">
+                  {t('editor.image.dialog.tab.upload')}
+                </TabsTrigger>
+              )
+              : <></>}
+
+            {uploadOptions.resourceImage === 'both' || uploadOptions.resourceImage === 'link'
+              ? (
+                <TabsTrigger value="link">
+                  {t('editor.image.dialog.tab.url')}
+                </TabsTrigger>
+              )
+              : <></>}
+          </TabsList>
+
+          <div className="my-[10px] flex items-center gap-[4px]">
+            <Checkbox
+              checked={imageInline}
+              onCheckedChange={(v) => {
+                setImageInline(v as boolean);
+              }}
+            />
+
+            <Label>
+              {t('editor.link.dialog.inline')}
+            </Label>
+          </div>
+
+          <TabsContent value="upload">
+            <div className="flex items-center gap-[10px]">
+              <Button className="mt-1 w-full"
+                onClick={handleClick}
+                size="sm"
+              >
+                {t('editor.image.dialog.tab.upload')}
+              </Button>
+
+              <ImageCropper
+                editor={props.editor}
+                imageInline={imageInline}
+                onClose={() => actionDialogImage.setOpen(props.editor.id, false)}
+              />
+            </div>
+
+            <input
+              accept="image/*"
+              multiple
+              onChange={handleFile}
+              ref={fileInput}
+              type="file"
+              style={{
+                display: 'none',
+              }}
+            />
+          </TabsContent>
+
+          <TabsContent value="link">
+            <form onSubmit={handleLink}>
+              <div className="flex items-center 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>
+  );
+}
+
+export default ActionImageButton;

package/src/extensions/Image/components/ImageCropper.tsx

@@ -0,0 +1,198 @@
+import React, { useRef, useState } from 'react';
+
+import ReactCrop, {
+  type Crop,
+  type PixelCrop,
+} from 'react-image-crop';
+
+import { IconComponent } from '@/components';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Image as ExtensionImage } from '@/extensions';
+import { useLocale } from '@/locales';
+import { dataURLtoFile, readImageAsBase64 } from '@/utils/file';
+
+export function ImageCropper({ editor, imageInline, onClose }: any) {
+  const { t } = useLocale();
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const imgRef = React.useRef<HTMLImageElement | null>(null);
+
+  const [crop, setCrop] = React.useState<Crop>();
+  const [croppedImageUrl, setCroppedImageUrl] = React.useState<string>('');
+  const fileInput = useRef<HTMLInputElement>(null);
+  const [urlUpload, setUrlUpload] = useState<any>({
+    src: '',
+    file: null,
+  });
+
+  function onCropComplete(crop: PixelCrop) {
+    if (imgRef.current && crop.width && crop.height) {
+      const croppedImageUrl = getCroppedImg(imgRef.current, crop);
+      setCroppedImageUrl(croppedImageUrl);
+    }
+  }
+
+  function getCroppedImg(image: HTMLImageElement, crop: PixelCrop): string {
+    const canvas = document.createElement('canvas');
+    const scaleX = image.naturalWidth / image.width;
+    const scaleY = image.naturalHeight / image.height;
+
+    canvas.width = crop.width * scaleX;
+    canvas.height = crop.height * scaleY;
+
+    const ctx = canvas.getContext('2d');
+
+    if (ctx) {
+      ctx.imageSmoothingEnabled = false;
+
+      ctx.drawImage(
+        image,
+        crop.x * scaleX,
+        crop.y * scaleY,
+        crop.width * scaleX,
+        crop.height * scaleY,
+        0,
+        0,
+        crop.width * scaleX,
+        crop.height * scaleY,
+      );
+    }
+
+    return canvas.toDataURL('image/png', 1.0);
+  }
+
+  async function onCrop() {
+    try {
+      const fileCrop = dataURLtoFile(croppedImageUrl, urlUpload?.file?.name || 'image.png');
+
+      const uploadOptions = editor.extensionManager.extensions.find(
+        (extension: any) => extension.name === ExtensionImage.name,
+      )?.options;
+
+      let src = '';
+      if (uploadOptions.upload) {
+        src = await uploadOptions.upload(fileCrop);
+      } else {
+        src = URL.createObjectURL(fileCrop);
+      }
+
+      editor.chain().focus().setImageInline({ src, inline: imageInline }).run();
+
+      setDialogOpen(false);
+
+      setUrlUpload({
+        src: '',
+        file: null,
+      });
+      onClose();
+    } catch (error) {
+      console.log('Error cropping image', error);
+    }
+  }
+
+  function handleClick(e: any) {
+    e.preventDefault();
+    fileInput.current?.click();
+  }
+
+  const handleFile = async (event: any) => {
+    const files = event?.target?.files;
+    if (!editor || editor.isDestroyed || files.length === 0) {
+      return;
+    }
+    const file = files[0];
+
+    const base64 = await readImageAsBase64(file);
+
+    setDialogOpen(true);
+    setUrlUpload({
+      src: base64.src,
+      file,
+    });
+  };
+
+  return (
+    <>
+      <Button className="mt-1 w-full"
+        onClick={handleClick}
+        size="sm"
+      >
+        {t('editor.image.dialog.tab.uploadCrop')}
+      </Button>
+
+      <Dialog open={dialogOpen}>
+        <DialogTrigger />
+
+        <DialogContent>
+          <DialogTitle>
+            {t('editor.image.dialog.tab.uploadCrop')}
+          </DialogTitle>
+
+          <div>
+            {urlUpload.src && (
+              <ReactCrop
+                className="w-full"
+                crop={crop}
+                onChange={c => setCrop(c)}
+                onComplete={c => onCropComplete(c)}
+              >
+                <img
+                  alt="Crop me"
+                  ref={imgRef}
+                  src={urlUpload.src}
+                />
+              </ReactCrop>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button
+              onClick={() => {
+                setDialogOpen(false);
+                setUrlUpload({
+                  src: '',
+                  file: null,
+                });
+              }}
+            >
+              {t('editor.imageUpload.cancel')}
+
+              <IconComponent className="ml-[4px]"
+                name="Trash2"
+              />
+            </Button>
+
+            <Button className="w-fit"
+              onClick={onCrop}
+            >
+              {t('editor.imageUpload.crop')}
+
+              <IconComponent className="ml-[4px]"
+                name="Crop"
+              />
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <input
+        accept="image/*"
+        multiple
+        onChange={handleFile}
+        ref={fileInput}
+        type="file"
+        style={{
+          display: 'none',
+        }}
+      />
+    </>
+  );
+}