reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

package/src/extensions/Image/Image.ts

@@ -1,303 +0,0 @@
-/* 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 'reactjs-tiptap-editor-pro/extensions/Image/components/ActionImageButton';
-import ImageView from 'reactjs-tiptap-editor-pro/extensions/Image/components/ImageView';
-import { UploadImagesPlugin, createImageUpload, handleImageDrop, handleImagePaste } from 'reactjs-tiptap-editor-pro/plugins/image-upload';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/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

@@ -1,186 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import { ActionButton, Button, Checkbox, Input, Label, Tabs, TabsContent, TabsList, TabsTrigger } from 'reactjs-tiptap-editor-pro/components';
-import { Dialog, DialogContent, DialogTitle, DialogTrigger } from 'reactjs-tiptap-editor-pro/components/ui/dialog';
-import { ImageCropper } from 'reactjs-tiptap-editor-pro/extensions/Image/components/ImageCropper';
-import Image from 'reactjs-tiptap-editor-pro/extensions/Image/Image';
-import { actionDialogImage } from 'reactjs-tiptap-editor-pro/extensions/Image/store';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-import { listenEvent } from 'reactjs-tiptap-editor-pro/utils/customEvents/customEvents';
-import { EVENTS } from 'reactjs-tiptap-editor-pro/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

@@ -1,198 +0,0 @@
-import React, { useRef, useState } from 'react';
-
-import ReactCrop, {
-  type Crop,
-  type PixelCrop,
-} from 'react-image-crop';
-
-import { IconComponent } from 'reactjs-tiptap-editor-pro/components';
-import { Button } from 'reactjs-tiptap-editor-pro/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogTitle,
-  DialogTrigger,
-} from 'reactjs-tiptap-editor-pro/components/ui/dialog';
-import { Image as ExtensionImage } from 'reactjs-tiptap-editor-pro/extensions';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-import { dataURLtoFile, readImageAsBase64 } from 'reactjs-tiptap-editor-pro/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',
-        }}
-      />
-    </>
-  );
-}