reactjs-tiptap-editor-pro 0.2.31 → 0.2.32

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

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

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

package/src/extensions/ImportWord/ImportWord.ts

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

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

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

package/src/extensions/Indent/Indent.ts

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

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

package/src/extensions/Italic/Italic.ts

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

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