reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

package/src/extensions/Drawer/components/NodeViewDrawer/NodeViewDrawer.tsx

@@ -1,260 +0,0 @@
-/* eslint-disable no-unsafe-optional-chaining */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { NodeViewWrapper, isNumber } from '@tiptap/react';
-import { throttle } from 'lodash-es';
-
-import { IMAGE_MAX_SIZE, IMAGE_MIN_SIZE, IMAGE_THROTTLE_WAIT_TIME } from '@/constants';
-import { clamp } from '@/utils/utils';
-
-interface Size {
-  width: number
-  height: number
-}
-
-const ResizeDirection = {
-  TOP_LEFT: 'tl',
-  TOP_RIGHT: 'tr',
-  BOTTOM_LEFT: 'bl',
-  BOTTOM_RIGHT: 'br',
-};
-
-export function NodeViewDrawer({ editor, node, updateAttributes, getPos, selected }: 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 } = node?.attrs;
-
-  const imgAttrs = useMemo(() => {
-    const { src, alt, width: w, height: h } = node?.attrs;
-
-    const width = isNumber(w) ? `${w}px` : w;
-    const height = isNumber(h) ? `${h}px` : h;
-    return {
-      src: src || undefined,
-      alt: alt || undefined,
-      style: {
-        width: width || undefined,
-        height: height || undefined,
-      },
-    };
-  }, [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() {
-    editor.commands.setNodeSelection(getPos());
-  }
-
-  const getMaxSize = useCallback(
-    throttle(() => {
-      const { width } = getComputedStyle(editor.view.dom);
-      setMaxSize((prev) => {
-        return {
-          ...prev,
-          width: Number.parseInt(width, 10),
-        };
-      });
-    }, IMAGE_THROTTLE_WAIT_TIME),
-    [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(node.attrs.width);
-    let height = Number(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 { width: wI, height: hI } = node?.attrs;
-      const ratio = wI / hI;
-
-      const width = clamp(w + dx, IMAGE_MIN_SIZE, maxSize.width);
-      const height = Math.round(width / ratio);
-
-      updateAttributes({
-        width,
-        height,
-      });
-    }, IMAGE_THROTTLE_WAIT_TIME),
-    [resizing, resizerState, maxSize, updateAttributes, node?.attrs],
-  );
-
-  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(editor.view.dom);
-
-    return () => {
-      resizeOb.disconnect();
-    };
-  }, [editor.view.dom, resizeOb]);
-
-  return (
-    <NodeViewWrapper className="image-view"
-      style={{ ...imageMaxStyle, width: '100%', textAlign: align }}
-    >
-      <div
-        data-drag-handle
-        draggable="true"
-        style={{ ...imageMaxStyle, background: '#fff' }}
-        className={`image-view__body ${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}
-        />
-
-        {editor.view.editable && (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>
-  );
-}

package/src/extensions/Drawer/index.ts

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

package/src/extensions/Emoji/Emoji.ts

@@ -1,146 +0,0 @@
-import { Node } from '@tiptap/core';
-import { PluginKey } from '@tiptap/pm/state';
-import { ReactRenderer } from '@tiptap/react';
-import Suggestion from '@tiptap/suggestion';
-import tippy from 'tippy.js';
-
-import EmojiPicker from '@/extensions/Emoji/components/EmojiPicker/EmojiPicker';
-
-import { EmojiList } from './components/EmojiList/EmojiList';
-import { emojiSearch, emojisToName } from './components/EmojiList/emojis';
-
-export const EXTENSION_PRIORITY_HIGHEST = 200;
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    emoji: {
-      setEmoji: (emoji: { name: string, emoji: string }) => ReturnType
-    }
-  }
-}
-
-export const EmojiPluginKey = new PluginKey('emoji');
-
-export { emojisToName };
-
-export const Emoji = Node.create({
-  name: 'emoji',
-  content: 'text*',
-
-  priority: EXTENSION_PRIORITY_HIGHEST,
-
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      HTMLAttributes: {},
-      suggestion: {
-        char: ':',
-        pluginKey: EmojiPluginKey,
-        command: ({ editor, range, props }: any) => {
-          editor
-            .chain()
-            .focus()
-            .insertContentAt(range, `${props.emoji} `)
-            .run();
-        },
-      },
-      button: ({ editor, t }: any) => {
-        return {
-          component: EmojiPicker,
-          componentProps: {
-            editor,
-            action: () => {
-              return;
-            },
-            isActive: () => false,
-            disabled: false,
-            icon: 'EmojiIcon',
-            tooltip: t('editor.emoji.tooltip'),
-          },
-        };
-      },
-    };
-  },
-
-  addCommands() {
-    return {
-      setEmoji:
-        emojiObject =>
-          ({ commands }) => {
-            return commands.insertContent(`${emojiObject.emoji} `);
-          },
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        ...this.options.suggestion,
-      }),
-    ];
-  },
-}).configure({
-  suggestion: {
-    items: ({ query }: any) => {
-      return emojiSearch(query);
-    },
-    render: () => {
-      let component: any;
-      let popup: any;
-      let isEditable: any;
-
-      return {
-        onStart: (props: any) => {
-          isEditable = props.editor.isEditable;
-          if (!isEditable)
-            return;
-
-          component = new ReactRenderer(EmojiList, {
-            props,
-            editor: props.editor,
-          });
-
-          popup = tippy('body', {
-            getReferenceClientRect: props.clientRect,
-            appendTo: () => document.body,
-            content: component.element,
-            showOnCreate: true,
-            interactive: true,
-            trigger: 'manual',
-            placement: 'bottom-start',
-          });
-        },
-
-        onUpdate(props: any) {
-          if (!isEditable)
-            return;
-
-          component.updateProps(props);
-          popup[0].setProps({
-            getReferenceClientRect: props.clientRect,
-          });
-        },
-
-        onKeyDown(props: any) {
-          if (!isEditable)
-            return;
-
-          if (props.event.key === 'Escape') {
-            popup[0].hide();
-            return true;
-          }
-          return component.ref?.onKeyDown(props);
-        },
-
-        onExit() {
-          if (!isEditable)
-            return;
-
-          popup[0].destroy();
-          component.destroy();
-        },
-      };
-    },
-  },
-});

package/src/extensions/Emoji/components/EmojiList/EmojiList.tsx

@@ -1,103 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-
-import clsx from 'clsx';
-import scrollIntoView from 'scroll-into-view-if-needed';
-
-import { useLocale } from '@/locales';
-
-interface IProps {
-  items: Array<{ name: string, emoji: string, fallbackImage?: string }>
-  command: any
-}
-
-export const EmojiList: React.FC<IProps> = forwardRef((props, ref) => {
-  const $container: any = useRef<HTMLDivElement>(null);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const { t } = useLocale();
-
-  const selectItem = (index: any) => {
-    const item = props.items[index];
-
-    if (item) {
-      props.command(item);
-    }
-  };
-
-  const upHandler = () => {
-    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
-  };
-
-  const downHandler = () => {
-    setSelectedIndex((selectedIndex + 1) % props.items.length);
-  };
-
-  const enterHandler = () => {
-    selectItem(selectedIndex);
-  };
-
-  useEffect(() => setSelectedIndex(0), [props.items]);
-
-  useEffect(() => {
-    if (Number.isNaN(selectedIndex + 1))
-      return;
-    const el = $container.current.querySelector(`span:nth-of-type(${selectedIndex + 1})`);
-    el && scrollIntoView(el, { behavior: 'smooth', scrollMode: 'if-needed' });
-  }, [selectedIndex]);
-
-  useImperativeHandle(ref, () => ({
-    onKeyDown: ({ event }: any) => {
-      if (event.key === 'ArrowUp') {
-        upHandler();
-        return true;
-      }
-
-      if (event.key === 'ArrowDown') {
-        downHandler();
-        return true;
-      }
-
-      if (event.key === 'Enter') {
-        enterHandler();
-        return true;
-      }
-
-      return false;
-    },
-  }));
-
-  return (
-    <div className="max-h-[320px] w-[200px] overflow-y-auto overflow-x-hidden rounded-sm !border bg-popover p-1 text-popover-foreground shadow-md outline-none">
-      <div ref={$container}>
-        {props.items.length > 0
-          ? (
-            props.items.map((item, index) => (
-              <span
-                className={clsx(' relative flex  cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent  focus:text-accent-foreground', index === selectedIndex ? 'bg-accent' : '')}
-                key={`emoji-list-code-${index}`}
-                onClick={() => selectItem(index)}
-              >
-                {item.fallbackImage ? <img className="size-[1em]"
-                  src={item.fallbackImage}
-                /> : item.emoji}
-                :
-
-                {item.name}
-                :
-              </span>
-            ))
-          )
-          : (
-            <div className="relative flex  cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors">
-              <span>
-                {t('no_result_found')}
-              </span>
-            </div>
-          )}
-      </div>
-    </div>
-  );
-});
-
-EmojiList.displayName = 'EmojiList';