reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

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

@@ -0,0 +1,260 @@
+/* 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 ImageGifView(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 } = props?.node?.attrs;
+
+  const imgAttrs = useMemo(() => {
+    const { src, alt, width: w, height: h } = props?.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,
+      },
+    };
+  }, [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 className="image-view"
+      style={{ ...imageMaxStyle, width: '100%', textAlign: align }}
+    >
+      <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 ImageGifView;

package/src/extensions/ImageGif/index.ts

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

package/src/extensions/ImportWord/ImportWord.ts

@@ -0,0 +1,52 @@
+// eslint-disable-next-line import/no-named-default
+import type { default as Mammoth } from 'mammoth';
+
+import { Extension } from '@tiptap/core';
+import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
+
+import ImportWordButton from 'reactjs-tiptap-editor-pro/extensions/ImportWord/components/ImportWordButton';
+
+export interface ImportWordOptions extends GeneralOptions<ImportWordOptions> {
+  /** Function for converting Word files to HTML */
+  convert?: (file: File) => Promise<string>
+
+  /** Function for uploading images */
+  upload?: (files: File[]) => Promise<unknown>
+
+  /**
+   * File Size limit(10 MB)
+   *
+   * @default 1024 * 1024 * 10
+   */
+  limit?: number
+  mammothOptions?: Parameters<typeof Mammoth['convertToHtml']>[1]
+}
+
+export const ImportWord = Extension.create<ImportWordOptions>({
+  name: 'importWord',
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      upload: undefined,
+      convert: undefined,
+      limit: 1024 * 1024 * 10, // 10 MB
+      button: ({ editor, extension, t }) => {
+        const { convert, limit, mammothOptions } = extension.options;
+        return {
+          component: ImportWordButton,
+          componentProps: {
+            editor,
+            convert,
+            limit,
+            mammothOptions,
+            action: () => editor.commands.setHorizontalRule(),
+            disabled: !editor.can().setHorizontalRule(),
+            icon: 'Word',
+            shortcutKeys: ['alt', 'mod', 'S'],
+            tooltip: t('editor.importWord.tooltip'),
+          },
+        };
+      },
+    };
+  },
+});

package/src/extensions/ImportWord/components/ImportWordButton.tsx

@@ -0,0 +1,151 @@
+import { useRef, useState } from 'react';
+
+import type { Editor } from '@tiptap/core';
+import mammoth from 'mammoth';
+
+import { ActionButton, useToast } from 'reactjs-tiptap-editor-pro/components';
+import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
+import { hasExtension } from 'reactjs-tiptap-editor-pro/utils/utils';
+
+function base64ToBlob(base64: any, mimeType: any) {
+  const byteCharacters = atob(base64.split(',')[1]);
+  const byteNumbers = Array.from({ length: byteCharacters.length });
+  for (let i = 0; i < byteCharacters.length; i++) {
+    byteNumbers[i] = byteCharacters.charCodeAt(i);
+  }
+  const byteArray = new Uint8Array(byteNumbers as any);
+  return new Blob([byteArray], { type: mimeType });
+}
+
+function blobToFile(blob: any, fileName: any) {
+  return new File([blob], fileName, { type: blob.type });
+}
+
+interface ImportWordButtonProps {
+  editor: Editor
+  disabled?: boolean
+  icon?: string
+  tooltip?: string
+  shortcutKeys?: string[]
+  action?: () => boolean
+  convert?: (file: File) => Promise<string>
+  limit?: number
+  mammothOptions?: any
+}
+
+function ImportWordButton(props: ImportWordButtonProps) {
+  const { toast } = useToast();
+  const { t } = useLocale();
+  const [loading, setLoading] = useState(false);
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  function triggerFileInput() {
+    fileInput.current?.click();
+  }
+
+  function handleFileChange(event: any) {
+    const file = event.target.files[0];
+    if (!file) {
+      return;
+    }
+    if (file.size > props.limit!) {
+      toast({
+        variant: 'destructive',
+        title: t('editor.importWord.limitSize'),
+      });
+      return;
+    }
+    importWord(file);
+  }
+
+  async function filerImage(html: string) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    const images = doc.querySelectorAll('img');
+    if (images.length === 0) {
+      return doc.body.innerHTML;
+    }
+    const hasImage = hasExtension(props.editor, 'image');
+    if (hasImage) {
+      const uploadOptions = props.editor.extensionManager.extensions.find(
+        extension => extension.name === 'importWord',
+      )?.options;
+      if (uploadOptions && typeof uploadOptions.upload === 'function') {
+        const files: File[] = [];
+        // convert base64 image to blob file
+        for (const img of images) {
+          const originalSrc = img.getAttribute('src');
+          const blob = base64ToBlob(originalSrc, 'image/jpeg');
+          const file = blobToFile(blob, 'image.jpeg');
+          files.push(file);
+        }
+        const uploadRes = await uploadOptions.upload(files);
+        // images
+        for (const [i, img] of images.entries()) {
+          img.setAttribute('src', uploadRes[i].src);
+          const parent = img.parentElement;
+          if (parent?.tagName === 'P') {
+            parent.insertAdjacentElement('beforebegin', img);
+            if (!parent.hasChildNodes() && parent.textContent === '') {
+              parent.remove();
+            }
+          }
+        }
+        return doc.body.innerHTML;
+      } else {
+        console.warn('Image Upload method found, skip image conversion');
+        return doc.body.innerHTML;
+      }
+    } else {
+      console.error('Image extension not found, unable to convert image');
+      return doc.body.innerHTML;
+    }
+  }
+
+  async function importWord(importFile: File) {
+    setLoading(true);
+    try {
+      if (props.convert) {
+        const result = await props.convert(importFile);
+        handleResult(result);
+      } else {
+        const arrayBuffer = await importFile.arrayBuffer();
+        // TODO: add messages
+        const { value } = await mammoth.convertToHtml(
+          { arrayBuffer },
+          props?.mammothOptions,
+        );
+        handleResult(value);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleResult(htmlResult: string) {
+    const html = await filerImage(htmlResult);
+    props.editor.chain().setContent(html, true).run();
+  }
+
+  return (
+    <div>
+      <ActionButton action={triggerFileInput}
+        disabled={props?.disabled}
+        icon={props?.icon}
+        loading={loading}
+        tooltip={props?.tooltip}
+      />
+
+      <input
+        accept=".docx"
+        onChange={handleFileChange}
+        ref={fileInput}
+        type="file"
+        style={{
+          display: 'none',
+        }}
+      />
+    </div>
+  );
+}
+
+export default ImportWordButton;

package/src/extensions/ImportWord/index.ts

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

package/src/extensions/Indent/Indent.ts

@@ -0,0 +1,110 @@
+import { Extension } from '@tiptap/core';
+import type { Editor } from '@tiptap/core';
+
+import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
+import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
+import { IndentProps, createIndentCommand } from 'reactjs-tiptap-editor-pro/utils/indent';
+
+export interface IndentOptions extends GeneralOptions<IndentOptions> {
+  types: string[]
+  minIndent: number
+  maxIndent: number
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    indent: {
+      /**
+       * Set the indent attribute
+       */
+      indent: () => ReturnType
+      /**
+       * Set the outdent attribute
+       */
+      outdent: () => ReturnType
+    }
+  }
+}
+
+export const Indent = Extension.create<IndentOptions>({
+  name: 'indent',
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      types: ['paragraph', 'heading', 'blockquote'],
+      minIndent: IndentProps.min,
+      maxIndent: IndentProps.max,
+      button({ editor, t }: { editor: Editor, t: (...args: any[]) => string }) {
+        return [
+          {
+            component: ActionButton,
+            componentProps: {
+              action: () => {
+                editor.commands.indent();
+              },
+              shortcutKeys: ['Tab'],
+              icon: 'IndentIncrease',
+              tooltip: t('editor.indent.tooltip'),
+            },
+          },
+          {
+            component: ActionButton,
+            componentProps: {
+              action: () => {
+                editor.commands.outdent();
+              },
+              shortcutKeys: ['Shift', 'Tab'],
+              icon: 'IndentDecrease',
+              tooltip: t('editor.outdent.tooltip'),
+            },
+          },
+        ];
+      },
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          indent: {
+            default: 0,
+            parseHTML: (element) => {
+              const identAttr = element.dataset.indent;
+              return (identAttr ? Number.parseInt(identAttr, 10) : 0) || 0;
+            },
+            renderHTML: (attributes) => {
+              if (!attributes.indent) {
+                return {};
+              }
+              return { 'data-indent': attributes.indent };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      indent: () =>
+        createIndentCommand({
+          delta: IndentProps.more,
+          types: this.options.types,
+        }),
+      outdent: () =>
+        createIndentCommand({
+          delta: IndentProps.less,
+          types: this.options.types,
+        }),
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Tab': () => this.editor.commands.indent(),
+      'Shift-Tab': () => this.editor.commands.outdent(),
+    };
+  },
+});

package/src/extensions/Indent/index.ts

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

package/src/extensions/Italic/Italic.ts

@@ -0,0 +1,29 @@
+import type { Editor } from '@tiptap/core';
+import type { ItalicOptions as TiptapItalicOptions } from '@tiptap/extension-italic';
+import TiptapItalic from '@tiptap/extension-italic';
+
+import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
+import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
+
+export interface ItalicOptions extends TiptapItalicOptions, GeneralOptions<ItalicOptions> {}
+
+export const Italic = TiptapItalic.extend<ItalicOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      button({ editor, t }: { editor: Editor, t: (...args: any[]) => string }) {
+        return {
+          component: ActionButton,
+          componentProps: {
+            action: () => editor.commands.toggleItalic(),
+            isActive: () => editor.isActive('italic') || false,
+            disabled: !editor.can().toggleItalic(),
+            shortcutKeys: ['mod', 'I'],
+            icon: 'Italic',
+            tooltip: t('editor.italic.tooltip'),
+          },
+        };
+      },
+    };
+  },
+});

package/src/extensions/Italic/index.ts

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