reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

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

@@ -0,0 +1,271 @@
+/* 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

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

package/src/extensions/Image/store.ts

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,176 @@
+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

@@ -0,0 +1,138 @@
+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;