reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

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

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

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

package/src/extensions/Emoji/Emoji.ts

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

@@ -0,0 +1,103 @@
+/* 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';