reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

package/src/extensions/Twitter/components/TwitterActiveButton.tsx

@@ -1,41 +0,0 @@
-import { ActionButton, IconComponent, Popover, PopoverContent, PopoverTrigger } from '@/components';
-import FormEditLinkTwitter from '@/extensions/Twitter/components/FormEditLinkTwitter';
-import type { ButtonViewReturnComponentProps } from '@/types';
-
-interface IPropsTwitterActiveButton {
-  editor: any
-  icon?: any
-  title?: string
-  tooltip?: string
-  disabled?: boolean
-  shortcutKeys?: string[]
-  isActive?: ButtonViewReturnComponentProps['isActive']
-  action?: ButtonViewReturnComponentProps['action']
-}
-
-function TwitterActiveButton(props: IPropsTwitterActiveButton) {
-  function onSetLink(src: string) {
-    if (props.action) {
-      props.action(src);
-    }
-  }
-
-  return (
-    <Popover modal>
-      <PopoverTrigger disabled={props?.disabled} asChild>
-        <ActionButton
-          tooltip={props?.tooltip}
-          isActive={props?.isActive}
-          disabled={props?.disabled}
-        >
-          <IconComponent name={props?.icon} />
-        </ActionButton>
-      </PopoverTrigger>
-      <PopoverContent hideWhenDetached className="w-full" align="start" side="bottom">
-        <FormEditLinkTwitter editor={props.editor} onSetLink={onSetLink} />
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-export default TwitterActiveButton;

package/src/extensions/Twitter/index.ts

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

package/src/extensions/UnderLine/Underline.ts

@@ -1,30 +0,0 @@
-import type { UnderlineOptions as TiptapUnderlineOptions } from '@tiptap/extension-underline';
-import TiptapUnderline from '@tiptap/extension-underline';
-
-import { ActionButton } from '@/components';
-import type { GeneralOptions } from '@/types';
-
-export interface UnderlineOptions
-  extends TiptapUnderlineOptions,
-  GeneralOptions<UnderlineOptions> {}
-
-export const Underline = TiptapUnderline.extend<UnderlineOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      button({ editor, t }: any) {
-        return {
-          component: ActionButton,
-          componentProps: {
-            action: () => editor.commands.toggleUnderline(),
-            isActive: () => editor.isActive('underline') || false,
-            disabled: !editor.can().toggleUnderline(),
-            icon: 'Underline',
-            shortcutKeys: ['mod', 'U'],
-            tooltip: t('editor.underline.tooltip'),
-          },
-        };
-      },
-    };
-  },
-});

package/src/extensions/UnderLine/index.ts

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

package/src/extensions/Video/Video.ts

@@ -1,204 +0,0 @@
-import { Node } from '@tiptap/core';
-
-import { VIDEO_SIZE } from '@/constants';
-import ActionVideoButton from '@/extensions/Video/components/ActiveVideoButton';
-import type { GeneralOptions } from '@/types';
-import { getCssUnitWithDefault } from '@/utils/utils';
-
-/**
- * Represents the interface for video options, extending GeneralOptions.
- */
-export interface VideoOptions extends GeneralOptions<VideoOptions> {
-  /**
-   * Indicates whether fullscreen play is allowed
-   *
-   * @default true
-   */
-  allowFullscreen: boolean
-  /**
-   * Indicates whether to display the frameborder
-   *
-   * @default false
-   */
-  frameborder: boolean
-  /**
-   * Width of the video, can be a number or string
-   *
-   * @default VIDEO_SIZE['size-medium']
-   */
-  width: number | string
-  /** HTML attributes object for passing additional attributes */
-  HTMLAttributes: {
-    [key: string]: any
-  }
-  /** Function for uploading files */
-  upload?: (file: File) => Promise<string>
-
-  /** The source URL of the video */
-  resourceVideo: 'upload' | 'link' | 'both'
-}
-
-/**
- * Represents the type for setting video options
- */
-interface SetVideoOptions {
-  /** The source URL of the video */
-  src: string
-  /** The width of the video */
-  width: string | number
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    video: {
-      /**
-       * Add an video
-       */
-      setVideo: (options: Partial<SetVideoOptions>) => ReturnType
-      /**
-       * Update an video
-       */
-      updateVideo: (options: Partial<SetVideoOptions>) => ReturnType
-    }
-  }
-}
-
-function linkConvert(src: string) {
-  // Convert youtube links
-  src = src
-    .replace('https://youtu.be/', 'https://www.youtube.com/watch?v=')
-    .replace('watch?v=', 'embed/');
-
-  // Convert vimeo links
-  src = src.replace('https://vimeo.com/', 'https://player.vimeo.com/video/');
-
-  // Convert bilibili links
-  const isBilibiliLink = /^https?:\/\/www.bilibili.com\/video\/.*/i.test(src);
-  if (isBilibiliLink) {
-    src = src
-      .replace(/\?.*$/, '')
-      .replace('https://www.bilibili.com/video/', 'https://player.bilibili.com/player.html?bvid=');
-  }
-
-  // Convert google drive links
-  if (src.includes('drive.google.com')) {
-    src = src.replace('/view', '/preview');
-  }
-
-  return src;
-}
-
-export const Video = Node.create<VideoOptions>({
-  name: 'video',
-  group: 'block',
-  atom: true,
-  draggable: true,
-
-  addOptions() {
-    return {
-      divider: false,
-      spacer: false,
-      allowFullscreen: true,
-      upload: undefined,
-      frameborder: false,
-      resourceVideo: 'both',
-      width: VIDEO_SIZE['size-medium'],
-      HTMLAttributes: {
-        class: 'iframe-wrapper',
-        style: 'display: flex;justify-content: center;',
-      },
-      button: ({ editor, t }: any) => {
-        return {
-          component: ActionVideoButton,
-          componentProps: {
-            action: () => {
-              return;
-            },
-            isActive: () => editor.isActive('video') || false,
-            /* If setVideo is not available(when Video Component is not imported), the button is disabled */
-            disabled: !editor.can().setVideo?.({}),
-            icon: 'Video',
-            tooltip: t('editor.video.tooltip'),
-            editor,
-          },
-        };
-      },
-    };
-  },
-
-  addAttributes() {
-    return {
-      src: {
-        default: null,
-        renderHTML: ({ src }) => ({
-          src: src ? linkConvert(src) : null,
-        }),
-      },
-      width: {
-        default: this.options.width,
-        renderHTML: ({ width }) => ({
-          width: getCssUnitWithDefault(width),
-        }),
-      },
-      frameborder: {
-        default: this.options.frameborder ? 1 : 0,
-        parseHTML: () => (this.options.frameborder ? 1 : 0),
-      },
-      allowfullscreen: {
-        default: this.options.allowFullscreen,
-        parseHTML: () => this.options.allowFullscreen,
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'div[data-video] iframe',
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    const { width = '100%' } = HTMLAttributes ?? {};
-
-    const iframeHTMLAttributes = {
-      ...HTMLAttributes,
-      width: '100%',
-      height: '100%',
-    };
-
-    const responsiveStyle = `position: relative;overflow: hidden;display: flex;flex: 1;max-width: ${width};`;
-    const responsiveSizesStyle = `flex: 1;padding-bottom: ${(9 / 16) * 100}%;`;
-
-    const iframeDOM = ['iframe', iframeHTMLAttributes];
-    const sizesDOM = ['div', { style: responsiveSizesStyle }];
-    const responsiveDOM = ['div', { style: responsiveStyle }, sizesDOM, iframeDOM];
-
-    const divAttrs = {
-      ...this.options.HTMLAttributes,
-      'data-video': '',
-    };
-
-    return ['div', divAttrs, responsiveDOM];
-  },
-
-  addCommands() {
-    return {
-      setVideo:
-        options =>
-          ({ commands }) => {
-            return commands.insertContent({
-              type: this.name,
-              attrs: options,
-            });
-          },
-      updateVideo:
-        options =>
-          ({ commands }) => {
-            return commands.updateAttributes(this.name, options);
-          },
-    };
-  },
-
-});

package/src/extensions/Video/components/ActiveVideoButton.tsx

@@ -1,191 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import { ActionButton, Button, Input, Tabs, TabsContent, TabsList, TabsTrigger } from '@/components';
-import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { Video } from '@/extensions/Video/Video';
-import { useLocale } from '@/locales';
-import { listenEvent } from '@/utils/customEvents/customEvents';
-import { EVENTS } from '@/utils/customEvents/events.constant';
-
-function checkIsVideo(url: string) {
-  return /\.(?:mp4|webm|ogg|mov)$/i.test(url);
-}
-
-function ActionVideoButton(props: any) {
-  const { t } = useLocale();
-
-  const [link, setLink] = useState<string>('');
-  const fileInput = useRef<HTMLInputElement>(null);
-
-  const [error, setError] = useState<string>('');
-
-  const [open, setOpen] = useState(false);
-
-  const handleUploadVideo = (evt: any) => {
-    setOpen(evt.detail);
-  };
-
-  useEffect(() => {
-    const rm1 = listenEvent(EVENTS.UPLOAD_VIDEO(props.editor.id), handleUploadVideo);
-
-    return () => {
-      rm1();
-    };
-  }, []);
-
-  const uploadOptions = useMemo(() => {
-    const uploadOptions = props.editor.extensionManager.extensions.find(
-      (extension: any) => extension.name === Video.name,
-    )?.options;
-
-    return uploadOptions;
-  }, [props.editor]);
-
-  async function handleFile(event: any) {
-    const files = event?.target?.files;
-    if (!props.editor || props.editor.isDestroyed || files.length === 0) {
-      return;
-    }
-    const file = files[0];
-
-    let src = '';
-    if (uploadOptions.upload) {
-      src = await uploadOptions.upload(file);
-    } else {
-      src = URL.createObjectURL(file);
-    }
-
-    props.editor
-      .chain()
-      .focus()
-      .setVideo({
-        src,
-        width: '100%',
-      })
-      .run();
-    setOpen(false);
-  }
-  function handleLink(e: any) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (!link) {
-      return;
-    }
-
-    props.editor
-      .chain()
-      .focus()
-      .setVideo({
-        src: link,
-        width: '100%',
-      })
-      .run();
-    setOpen(false);
-  }
-
-  function handleClick(e: any) {
-    e.preventDefault();
-    fileInput.current?.click();
-  }
-
-  return (
-    <Dialog onOpenChange={setOpen}
-      open={open}
-    >
-      <DialogTrigger asChild>
-        <ActionButton
-          action={() => setOpen(true)}
-          icon={props.icon}
-          tooltip={props.tooltip}
-        />
-      </DialogTrigger>
-
-      <DialogContent>
-        <DialogTitle>
-          {t('editor.video.dialog.title')}
-        </DialogTitle>
-
-        <Tabs
-          activationMode="manual"
-          defaultValue={
-            (uploadOptions?.resourceVideo === 'both' || uploadOptions?.resourceVideo === 'upload') ? 'upload' : 'link'
-          }
-        >
-          <TabsList className="grid w-full grid-cols-2">
-            {(uploadOptions?.resourceVideo === 'both' || uploadOptions?.resourceVideo === 'upload') && (
-              <TabsTrigger value="upload">
-                {t('editor.video.dialog.tab.upload')}
-              </TabsTrigger>
-            )}
-
-            {(uploadOptions?.resourceVideo === 'both' || uploadOptions?.resourceVideo === 'link') && (
-              <TabsTrigger value="link">
-                {t('editor.video.dialog.link')}
-              </TabsTrigger>
-            )}
-          </TabsList>
-
-          <TabsContent value="upload">
-            <div className="flex items-center gap-[10px]">
-              <Button className="mt-1 w-full"
-                onClick={handleClick}
-                size="sm"
-              >
-                {t('editor.video.dialog.tab.upload')}
-              </Button>
-            </div>
-
-            <input
-              accept="video/*"
-              multiple
-              onChange={handleFile}
-              ref={fileInput}
-              type="file"
-              style={{
-                display: 'none',
-              }}
-            />
-          </TabsContent>
-
-          <TabsContent value="link">
-            <form onSubmit={handleLink}>
-              <div className="flex items-center gap-2">
-                <Input
-                  autoFocus
-                  placeholder={t('editor.video.dialog.placeholder')}
-                  required
-                  type="url"
-                  value={link}
-                  onChange={(e) => {
-                    const url = e.target.value;
-
-                    const isVideoUrl = checkIsVideo(url);
-
-                    if (!isVideoUrl) {
-                      setError('Invalid video URL');
-                      setLink('');
-                      return;
-                    }
-                    setError('');
-                    setLink(url);
-                  }}
-                />
-
-                <Button type="submit">
-                  {t('editor.video.dialog.button.apply')}
-                </Button>
-              </div>
-            </form>
-
-            {error && <div className="my-[5px] text-red-500">
-              {error}
-            </div>}
-          </TabsContent>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default ActionVideoButton;

package/src/extensions/Video/index.ts

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

package/src/extensions/Video/store.ts

@@ -1,15 +0,0 @@
-import { useStoreUploadVideo } from '@/store/store';
-import { dispatchEvent } from '@/utils/customEvents/customEvents';
-import { EVENTS } from '@/utils/customEvents/events.constant';
-
-export function useDialogVideo() {
-  const [v] = useStoreUploadVideo(store => store.value);
-
-  return v;
-}
-
-export const actionDialogVideo = {
-  setOpen: (id: any, value: boolean) => {
-    dispatchEvent(EVENTS.UPLOAD_VIDEO(id), value);
-  },
-};

package/src/extensions/index.ts

@@ -1,122 +0,0 @@
-export { Bold } from './Bold';
-export type { BoldOptions } from './Bold';
-
-export { Italic } from './Italic';
-export type { ItalicOptions } from './Italic';
-
-export { Underline } from './UnderLine';
-export type { UnderlineOptions } from './UnderLine';
-
-export { Strike } from './Strike';
-export type { StrikeOptions } from './Strike';
-
-export { Code } from './Code';
-export type { CodeOptions } from './Code';
-
-export { CodeBlock } from './CodeBlock';
-export type { CodeBlockOptions } from './CodeBlock';
-
-export { FontFamily } from './FontFamily';
-
-export { Heading } from './Heading';
-export type { HeadingOptions } from './Heading';
-
-export { TextAlign } from './TextAlign';
-export type { TextAlignOptions } from './TextAlign';
-
-export { FontSize } from './FontSize';
-export type { FontSizeOptions } from './FontSize';
-
-export { Color } from './Color';
-export type { ColorOptions } from './Color';
-
-export { Highlight } from './Highlight';
-export type { HighlightOptions } from './Highlight';
-
-export { BulletList } from './BulletList';
-export type { BulletListOptions } from './BulletList';
-
-export { Clear } from './Clear';
-export type { ClearOptions } from './Clear';
-
-export { OrderedList } from './OrderedList';
-export type { OrderedListOptions } from './OrderedList';
-
-export { TaskList } from './TaskList';
-export type { TaskListOptions } from './TaskList';
-
-export { Blockquote } from './Blockquote';
-export type { BlockquoteOptions } from './Blockquote';
-
-export { Link } from './Link';
-export type { LinkOptions } from './Link';
-
-export { HorizontalRule } from './HorizontalRule';
-export type { HorizontalRuleOptions } from './HorizontalRule';
-
-export { History } from './History';
-export type { HistoryOptions } from './History';
-
-export { BaseKit } from './BaseKit';
-export type { BaseKitOptions } from './BaseKit';
-
-export { SubAndSuperScript } from './Subscript';
-
-export type { SubAndSuperScriptOptions } from './Subscript';
-export type { MoreMarkOptions } from './MoreMark';
-export { MoreMark } from './MoreMark';
-
-export { Indent } from './Indent';
-export type { IndentOptions } from './Indent';
-
-export { LineHeight } from './LineHeight';
-export type { LineHeightOptions } from './LineHeight';
-
-export { SlashCommand } from './SlashCommand';
-
-export { Image } from './Image';
-export type { SetImageAttrsOptions } from './Image';
-
-export { Video } from './Video/Video';
-export type { VideoOptions } from './Video';
-
-export { Table } from './Table';
-
-export type { TableOptions } from './Table';
-
-export { FormatPainter } from './FormatPainter';
-export type { FormatPainterOptions } from './FormatPainter';
-
-export { Column, MultiColumn, ColumnActionButton } from './MultiColumn';
-
-export { Iframe } from './Iframe';
-
-export { SearchAndReplace } from './SearchAndReplace';
-
-export { Emoji } from './Emoji';
-
-export { Katex } from './Katex';
-
-export { ExportPdf } from './ExportPdf';
-
-export { ImportWord } from './ImportWord';
-
-export { ExportWord } from './ExportWord';
-
-export { TableOfContents } from './TableOfContent';
-
-export { Excalidraw } from './Excalidraw';
-
-export { TextDirection } from './TextDirection';
-
-export { Mention } from './Mention';
-
-export { Attachment } from './Attachment';
-
-export { ImageGif } from './ImageGif';
-
-export { Mermaid } from './Mermaid';
-
-export { Twitter } from './Twitter';
-
-export { Drawer } from './Drawer';

package/src/hooks/useActive.tsx

@@ -1,24 +0,0 @@
-/* eslint-disable prefer-spread */
-import { useEffect, useState } from 'react';
-
-import type { Editor } from '@tiptap/core';
-
-export function useActive(editor: Editor, ...args: any[]) {
-  const [active, toggleActive] = useState(false);
-
-  useEffect(() => {
-    const listener = () => {
-      toggleActive(editor.isActive.apply(editor, args as any));
-    };
-
-    editor.on('selectionUpdate', listener);
-    editor.on('transaction', listener);
-
-    return () => {
-      editor.off('selectionUpdate', listener);
-      editor.off('transaction', listener);
-    };
-  }, [editor, args, toggleActive]);
-
-  return active;
-}

package/src/hooks/useAttributes.tsx

@@ -1,45 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { useEffect, useRef, useState } from 'react';
-
-import type { Editor } from '@tiptap/core';
-import deepEqual from 'deep-equal';
-
-type MapFn<T, R> = (arg: T) => R;
-
-function mapSelf<T>(d: T): T {
-  return d;
-}
-
-export function useAttributes<T, R = T>(editor: Editor, attrbute: string, defaultValue?: T, map?: (arg: T) => R) {
-  const mapFn = (map || mapSelf) as MapFn<T, R>;
-  const [value, setValue] = useState<R>(mapFn(defaultValue as any));
-  const prevValueCache = useRef<R>(value);
-
-  useEffect(() => {
-    const listener = () => {
-      const attrs = { ...defaultValue, ...editor.getAttributes(attrbute) } as any;
-      Object.keys(attrs).forEach((key) => {
-        if (attrs[key] === null || attrs[key] === undefined) {
-          // @ts-ignore
-          attrs[key] = defaultValue ? defaultValue[key] : null;
-        }
-      });
-      const nextAttrs = mapFn(attrs);
-      if (deepEqual(prevValueCache.current, nextAttrs)) {
-        return;
-      }
-      setValue(nextAttrs);
-      prevValueCache.current = nextAttrs;
-    };
-
-    editor.on('selectionUpdate', listener);
-    editor.on('transaction', listener);
-
-    return () => {
-      editor.off('selectionUpdate', listener);
-      editor.off('transaction', listener);
-    };
-  }, [editor, defaultValue, attrbute, mapFn]);
-
-  return value;
-}