reactjs-tiptap-editor-pro 0.2.31 → 0.2.32

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

@@ -1,271 +0,0 @@
-/* eslint-disable no-unsafe-optional-chaining */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { NodeViewWrapper } from '@tiptap/react';
-import { clamp, isNumber, throttle } from 'lodash-es';
-
-import { IMAGE_MAX_SIZE, IMAGE_MIN_SIZE, IMAGE_THROTTLE_WAIT_TIME } from 'reactjs-tiptap-editor-pro/constants';
-
-interface Size {
-  width: number
-  height: number
-}
-
-const ResizeDirection = {
-  TOP_LEFT: 'tl',
-  TOP_RIGHT: 'tr',
-  BOTTOM_LEFT: 'bl',
-  BOTTOM_RIGHT: 'br',
-};
-
-function ImageView(props: any) {
-  const [maxSize, setMaxSize] = useState<Size>({
-    width: IMAGE_MAX_SIZE,
-    height: IMAGE_MAX_SIZE,
-  });
-
-  const [originalSize, setOriginalSize] = useState({
-    width: 0,
-    height: 0,
-  });
-
-  const [resizeDirections] = useState<string[]>([
-    ResizeDirection.TOP_LEFT,
-    ResizeDirection.TOP_RIGHT,
-    ResizeDirection.BOTTOM_LEFT,
-    ResizeDirection.BOTTOM_RIGHT,
-  ]);
-
-  const [resizing, setResizing] = useState<boolean>(false);
-
-  const [resizerState, setResizerState] = useState({
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0,
-    dir: '',
-  });
-
-  const { align, inline } = props?.node?.attrs;
-
-  const imgAttrs = useMemo(() => {
-    const { src, alt, width: w, height: h, flipX, flipY } = props?.node?.attrs;
-
-    const width = isNumber(w) ? `${w}px` : w;
-    const height = isNumber(h) ? `${h}px` : h;
-    const transformStyles: any = [];
-
-    if (flipX)
-      transformStyles.push('rotateX(180deg)');
-    if (flipY)
-      transformStyles.push('rotateY(180deg)');
-    const transform = transformStyles.join(' ');
-
-    return {
-      src: src || undefined,
-      alt: alt || undefined,
-      style: {
-        width: width || undefined,
-        height: height || undefined,
-        transform: transform || 'none',
-      },
-    };
-  }, [props?.node?.attrs]);
-
-  const imageMaxStyle = useMemo(() => {
-    const {
-      style: { width },
-    } = imgAttrs;
-
-    return { width: width === '100%' ? width : undefined };
-  }, [imgAttrs]);
-
-  function onImageLoad(e: Record<string, any>) {
-    setOriginalSize({
-      width: e.target.width,
-      height: e.target.height,
-    });
-  }
-
-  // https://github.com/scrumpy/tiptap/issues/361#issuecomment-540299541
-  function selectImage() {
-    const { editor, getPos } = props;
-    editor.commands.setNodeSelection(getPos());
-  }
-
-  const getMaxSize = useCallback(
-    throttle(() => {
-      const { editor } = props;
-      const { width } = getComputedStyle(editor.view.dom);
-      setMaxSize((prev) => {
-        return {
-          ...prev,
-          width: Number.parseInt(width, 10),
-        };
-      });
-    }, IMAGE_THROTTLE_WAIT_TIME),
-    [props?.editor],
-  );
-
-  function onMouseDown(e: MouseEvent, dir: string) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const originalWidth = originalSize.width;
-    const originalHeight = originalSize.height;
-    const aspectRatio = originalWidth / originalHeight;
-
-    let width = Number(props.node.attrs.width);
-    let height = Number(props.node.attrs.height);
-    const maxWidth = maxSize.width;
-
-    if (width && !height) {
-      width = width > maxWidth ? maxWidth : width;
-      height = Math.round(width / aspectRatio);
-    } else if (height && !width) {
-      width = Math.round(height * aspectRatio);
-      width = width > maxWidth ? maxWidth : width;
-    } else if (!width && !height) {
-      width = originalWidth > maxWidth ? maxWidth : originalWidth;
-      height = Math.round(width / aspectRatio);
-    } else {
-      width = width > maxWidth ? maxWidth : width;
-    }
-
-    setResizing(true);
-
-    setResizerState({
-      x: e.clientX,
-      y: e.clientY,
-      w: width,
-      h: height,
-      dir,
-    });
-  }
-
-  const onMouseMove = useCallback(
-    throttle((e: MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (!resizing) {
-        return;
-      }
-
-      const { x, w, dir } = resizerState;
-
-      const dx = (e.clientX - x) * (/l/.test(dir) ? -1 : 1);
-      // const dy = (e.clientY - y) * (/t/.test(dir) ? -1 : 1)
-
-      const width = clamp(w + dx, IMAGE_MIN_SIZE, maxSize.width);
-      const height = null;
-
-      props.updateAttributes({
-        width,
-        height,
-      });
-    }, IMAGE_THROTTLE_WAIT_TIME),
-    [resizing, resizerState, maxSize, props.updateAttributes],
-  );
-
-  const onMouseUp = useCallback(
-    (e: MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!resizing) {
-        return;
-      }
-
-      setResizerState({
-        x: 0,
-        y: 0,
-        w: 0,
-        h: 0,
-        dir: '',
-      });
-      setResizing(false);
-
-      selectImage();
-    },
-    [resizing, selectImage],
-  );
-
-  const onEvents = useCallback(() => {
-    document?.addEventListener('mousemove', onMouseMove, true);
-    document?.addEventListener('mouseup', onMouseUp, true);
-  }, [onMouseMove, onMouseUp]);
-
-  const offEvents = useCallback(() => {
-    document?.removeEventListener('mousemove', onMouseMove, true);
-    document?.removeEventListener('mouseup', onMouseUp, true);
-  }, [onMouseMove, onMouseUp]);
-
-  useEffect(() => {
-    if (resizing) {
-      onEvents();
-    } else {
-      offEvents();
-    }
-
-    return () => {
-      offEvents();
-    };
-  }, [resizing, onEvents, offEvents]);
-
-  const resizeOb: ResizeObserver = useMemo(() => {
-    return new ResizeObserver(() => getMaxSize());
-  }, [getMaxSize]);
-
-  useEffect(() => {
-    resizeOb.observe(props.editor.view.dom);
-
-    return () => {
-      resizeOb.disconnect();
-    };
-  }, [props.editor.view.dom, resizeOb]);
-
-  return (
-    <NodeViewWrapper
-      as={inline ? 'span' : 'div'}
-      className="image-view"
-      style={{ ...imageMaxStyle, textAlign: align, display: inline ? 'inline' : 'block' }}
-    >
-      <div
-        data-drag-handle
-        draggable="true"
-        style={imageMaxStyle}
-        className={`image-view__body ${props?.selected ? 'image-view__body--focused' : ''} ${
-          resizing ? 'image-view__body--resizing' : ''
-        }`}
-      >
-        <img
-          alt={imgAttrs.alt}
-          className="image-view__body__image block"
-          height="auto"
-          onClick={selectImage}
-          onLoad={onImageLoad}
-          src={imgAttrs.src}
-          style={imgAttrs.style}
-        />
-
-        {props?.editor.view.editable && (props?.selected || resizing) && (
-          <div className="image-resizer">
-            {resizeDirections?.map((direction) => {
-              return (
-                <span
-                  className={`image-resizer__handler image-resizer__handler--${direction}`}
-                  key={`image-dir-${direction}`}
-                  onMouseDown={(e: any) => onMouseDown(e, direction)}
-                >
-                </span>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </NodeViewWrapper>
-  );
-}
-
-export default ImageView;

package/src/extensions/Image/index.ts

@@ -1 +0,0 @@
-export * from './Image';

package/src/extensions/Image/store.ts

@@ -1,15 +0,0 @@
-import { useStoreUploadImage } from 'reactjs-tiptap-editor-pro/store/store';
-import { dispatchEvent } from 'reactjs-tiptap-editor-pro/utils/customEvents/customEvents';
-import { EVENTS } from 'reactjs-tiptap-editor-pro/utils/customEvents/events.constant';
-
-export function useDialogImage() {
-  const [v] = useStoreUploadImage(store => store.value);
-
-  return v;
-}
-
-export const actionDialogImage = {
-  setOpen: (id: any, value: boolean) => {
-    dispatchEvent(EVENTS.UPLOAD_IMAGE(id), value);
-  },
-};

package/src/extensions/ImageGif/ImageGif.ts

@@ -1,176 +0,0 @@
-import { mergeAttributes } from '@tiptap/core';
-import type { ImageOptions } from '@tiptap/extension-image';
-import TiptapImage from '@tiptap/extension-image';
-import { ReactNodeViewRenderer } from '@tiptap/react';
-
-import ImageGifActionButton from 'reactjs-tiptap-editor-pro/extensions/ImageGif/components/ImageGifActionButton';
-import ImageGifView from 'reactjs-tiptap-editor-pro/extensions/ImageGif/components/ImageGifView';
-
-export interface SetImageAttrsOptions {
-  src?: string
-  /** The alternative text for the image. */
-  alt?: string
-  /** The title of the image. */
-  title?: string
-  /** The width of the image. */
-  width?: number | string | null
-  /** The alignment of the image. */
-  align?: 'left' | 'center' | 'right'
-}
-
-interface ImageGifOptions extends ImageOptions {
-  /**
-   * The key for the gif https://giphy.com/
-   */
-  GIPHY_API_KEY: string
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    imageGifUpload: {
-      /**
-       * Add an image gif
-       */
-      setImageGif: (options: Partial<SetImageAttrsOptions>) => ReturnType
-      /**
-       * Update an image gif
-       */
-      updateImageGif: (options: Partial<SetImageAttrsOptions>) => ReturnType
-      /**
-       * Set image alignment
-       */
-      setAlignImageGif: (align: 'left' | 'center' | 'right') => ReturnType
-    }
-  }
-}
-
-export const ImageGif = TiptapImage.extend<ImageGifOptions>({
-  name: 'imageGif',
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      inline: false,
-      content: '',
-      marks: '',
-      group: 'block',
-      GIPHY_API_KEY: '',
-      draggable: false,
-      selectable: true,
-      atom: true,
-      button: ({ editor, extension, t }: any) => {
-        const giphyApiKey = extension?.options?.GIPHY_API_KEY || '';
-
-        return {
-          component: ImageGifActionButton,
-          componentProps: {
-            editor,
-            action: () => {
-              return;
-            },
-            isActive: () => false,
-            disabled: false,
-            icon: 'GifIcon',
-            tooltip: t('editor.imageGif.tooltip'),
-            giphyApiKey,
-          },
-        };
-      },
-    };
-  },
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      width: {
-        default: null,
-        parseHTML: (element) => {
-          const width = element.style.width || element.getAttribute('width') || '10';
-          return width === undefined ? 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,
-          };
-        },
-      },
-    };
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(ImageGifView);
-  },
-  addCommands() {
-    return {
-      ...this.parent?.(),
-      setImageGif: (options: any) => ({ commands }: any) => {
-        return commands.insertContent({
-          type: this.name,
-          attrs: options,
-        });
-      },
-      updateImageGif:
-        (options: any) =>
-          ({ commands }: any) => {
-            return commands.updateAttributes(this.name, options);
-          },
-      setAlignImageGif:
-          (align: any) =>
-            ({ commands }: any) => {
-              return commands.updateAttributes(this.name, { align });
-            },
-    };
-  },
-  renderHTML({ HTMLAttributes }) {
-    const { align } = HTMLAttributes;
-
-    const style = align ? `text-align: ${align};` : '';
-    return [
-      'div', // Parent element
-      {
-        style,
-        class: 'imageGIf',
-      },
-      [
-        'img',
-        mergeAttributes(
-          // Always render the `height="auto"`
-          {
-            height: 'auto',
-          },
-          this.options.HTMLAttributes,
-          HTMLAttributes,
-        ),
-      ],
-    ];
-  },
-  parseHTML() {
-    return [
-      {
-        tag: 'div[class=imageGIf]',
-        getAttrs: (element) => {
-          const img = element.querySelector('img');
-
-          const width = img?.getAttribute('width');
-
-          return {
-            src: img?.getAttribute('src'),
-            alt: img?.getAttribute('alt'),
-            title: img?.getAttribute('title'),
-            width: width ? Number.parseInt(width, 10) : null,
-            align: img?.getAttribute('align') || element.style.textAlign || null,
-          };
-        },
-      },
-    ];
-  },
-});
-
-export default ImageGif;

package/src/extensions/ImageGif/components/ImageGifActionButton.tsx

@@ -1,138 +0,0 @@
-import type React from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { debounce } from 'lodash-es';
-
-import { ActionButton, Input, Popover, PopoverContent, PopoverTrigger } from 'reactjs-tiptap-editor-pro/components';
-
-interface IProps {
-  showClear?: boolean
-  selectImage: (arg: string) => void
-  children: React.ReactNode
-  giphyApiKey: string
-}
-
-function ImageGifWrap({ selectImage, giphyApiKey, children }: IProps) {
-  const [gifs, setGifs] = useState([]);
-  const [limit] = useState(15);
-
-  const inputRef = useRef(null);
-
-  const search = (term: any, kind: any = 'search') => {
-    if (!giphyApiKey) {
-      return;
-    }
-
-    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);
-      });
-  };
-
-  useEffect(() => {
-    search('', 'trend');
-  }, []);
-
-  const handleInputChange = useCallback(
-    debounce((event: React.ChangeEvent<HTMLInputElement>) => {
-      if (!event.target.value) {
-        search('', 'trend');
-        return;
-      }
-      // Add your logic here
-      search(event.target.value);
-    }, 350), // Adjust the debounce delay as needed
-    [],
-  );
-
-  return (
-    <Popover modal>
-      <PopoverTrigger asChild>
-        {children}
-      </PopoverTrigger>
-
-      <PopoverContent align="start"
-        className="size-full p-2"
-        hideWhenDetached
-        side="bottom"
-      >
-
-        {
-          giphyApiKey
-            ? (
-              <>
-                <div className="mb-[10px] w-full">
-                  <Input
-                    onChange={handleInputChange}
-                    placeholder="Search GIF"
-                    ref={inputRef}
-                    type="text"
-                  />
-                </div>
-
-                <div className="max-h-[280px] overflow-y-auto">
-                  <div className="grid grid-cols-2 gap-1 ">
-
-                    {gifs?.length
-                      ? gifs?.map((o: any) => (
-                        <img
-                          alt="giphy"
-                          className="cursor-pointer 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}
-                        />
-                      ))
-                      : <p>
-                        No GIFs found
-                      </p>}
-                  </div>
-                </div>
-              </>
-            )
-            : (
-              <div>
-                <p>
-                  Missing Giphy API Key
-                </p>
-              </div>
-            )
-        }
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-export function ImageGifActionButton({ editor, icon, giphyApiKey, ...props }: any) {
-  const selectImage = (giphyblock: any) => {
-    const { url } = giphyblock.images.original;
-
-    editor.chain().focus().setImageGif({ src: url }).run();
-  };
-
-  return (
-    <ImageGifWrap
-      giphyApiKey={giphyApiKey}
-      selectImage={selectImage}
-    >
-      <ActionButton
-        icon={icon}
-        tooltip={props?.tooltip}
-      />
-    </ImageGifWrap>
-  );
-}
-
-export default ImageGifActionButton;