reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

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

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

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

package/src/extensions/UnderLine/Underline.ts

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

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

package/src/extensions/Video/Video.ts

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

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

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

package/src/extensions/Video/store.ts

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

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

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

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