reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

package/src/components/icons/icons.ts

@@ -1,212 +0,0 @@
-import {
-  TextAlignCenterIcon,
-  TextAlignJustifyIcon,
-  TextAlignLeftIcon,
-  TextAlignRightIcon,
-} from '@radix-ui/react-icons';
-import {
-  BetweenHorizonalEnd,
-  BetweenHorizonalStart,
-  BetweenVerticalEnd,
-  BetweenVerticalStart,
-  Bold,
-  BookMarked,
-  ChevronDown,
-  ChevronUp,
-  ChevronsUpDown,
-  Clipboard,
-  Code,
-  CodeXml,
-  Columns2,
-  Columns3,
-  Columns4,
-  Copy,
-  CropIcon,
-  Eraser,
-  Eye,
-  FlipHorizontal,
-  FlipVertical,
-  Frame,
-  GripVertical,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Heading6,
-  ImageUp,
-  IndentDecrease,
-  IndentIncrease,
-  Italic,
-  Link,
-  List,
-  ListOrdered,
-  ListTodo,
-  LoaderCircle,
-  Maximize,
-  Minimize,
-  Minus,
-  PaintRoller,
-  PanelLeft,
-  PanelRight,
-  Paperclip,
-  Pencil,
-  Plus,
-  Quote,
-  Redo2,
-  Replace,
-  Settings,
-  Sigma,
-  SmilePlus,
-  SmilePlusIcon,
-  Sparkles,
-  Strikethrough,
-  Subscript,
-  Superscript,
-  Table,
-  TableCellsMerge,
-  TableCellsSplit,
-  Trash,
-  Trash2,
-  Type,
-  Underline,
-  Undo2,
-  Unlink,
-  Video,
-  ZoomIn,
-  ZoomOut,
-  PencilRuler
-} from 'lucide-react';
-
-import {
-  AspectRatio,
-  BlockquoteLeft,
-  DeleteColumn,
-  DeleteRow,
-  FileWordOutline,
-  FormatLineHeight,
-  MenuDown,
-  SizeL,
-  SizeM,
-  SizeS,
-} from 'reactjs-tiptap-editor-pro/components/icons';
-import { ColumnAddLeft } from 'reactjs-tiptap-editor-pro/components/icons/ColumnAddLeft';
-import { ColumnAddRight } from 'reactjs-tiptap-editor-pro/components/icons/ColumnAddRight';
-import { Direction } from 'reactjs-tiptap-editor-pro/components/icons/Direction';
-import { Excalidraw } from 'reactjs-tiptap-editor-pro/components/icons/Excalidraw';
-import { ExportPdf } from 'reactjs-tiptap-editor-pro/components/icons/ExportPdf';
-import ExportWord from 'reactjs-tiptap-editor-pro/components/icons/ExportWord';
-import { GifIcon } from 'reactjs-tiptap-editor-pro/components/icons/GIfIcon';
-import { LeftToRight } from 'reactjs-tiptap-editor-pro/components/icons/LeftToRight';
-import { Mermaid } from 'reactjs-tiptap-editor-pro/components/icons/Mermaid';
-import { RightToLeft } from 'reactjs-tiptap-editor-pro/components/icons/RightToLeft';
-import { Twitter } from 'reactjs-tiptap-editor-pro/components/icons/Twitter';
-
-import ImportWord from './ImportWord';
-
-export const icons = {
-  Bold,
-  LoaderCircle,
-  Italic,
-  Underline,
-  Quote,
-  TextQuote: BlockquoteLeft,
-  Strikethrough,
-  Minus,
-  Eraser,
-  PaintRoller,
-  Redo2,
-  Undo2,
-  AlignCenter: TextAlignCenterIcon,
-  AlignJustify: TextAlignJustifyIcon,
-  AlignLeft: TextAlignLeftIcon,
-  AlignRight: TextAlignRightIcon,
-  ChevronDown,
-  Subscript,
-  Superscript,
-  Code,
-  Code2: CodeXml,
-  Type,
-  IndentIncrease,
-  IndentDecrease,
-  List,
-  ListOrdered,
-  ListTodo,
-  Link,
-  ImageUp,
-  Video,
-  Maximize,
-  Minimize,
-  Table,
-  Sparkles,
-  Pencil,
-  Unlink,
-  BetweenHorizonalEnd,
-  BetweenHorizonalStart,
-  BetweenVerticalStart,
-  BetweenVerticalEnd,
-  TableCellsMerge,
-  TableCellsSplit,
-  Trash2,
-  Trash,
-  Replace,
-  ChevronsUpDown,
-  LineHeight: FormatLineHeight,
-  Word: FileWordOutline,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Heading6,
-  Columns2,
-  Columns3,
-  Columns4,
-  Plus,
-  Grip: GripVertical,
-  Copy,
-  Clipboard,
-  PanelLeft,
-  PanelRight,
-  Columns: Columns2,
-  Iframe: Frame,
-
-  MenuDown,
-  SizeS,
-  SizeM,
-  SizeL,
-  AspectRatio,
-
-  Emoji: SmilePlus,
-
-  DeleteColumn,
-  DeleteRow,
-  SearchAndReplace: Replace,
-  EmojiIcon: SmilePlusIcon,
-  KatexIcon: Sigma,
-  ExportPdf,
-  ExportWord,
-  ImportWord,
-  ColumnAddLeft,
-  ColumnAddRight,
-  BookMarked,
-  Excalidraw,
-  ZoomIn,
-  ZoomOut,
-  Settings,
-  Eye,
-
-  TextDirection: Direction,
-  LeftToRight,
-  RightToLeft,
-
-  Attachment: Paperclip,
-  GifIcon,
-  ChevronUp,
-  Crop: CropIcon,
-  Mermaid,
-  Twitter,
-  FlipX: FlipVertical,
-  FlipY: FlipHorizontal,
-  PencilRuler
-} as any;

package/src/components/icons/index.ts

@@ -1,12 +0,0 @@
-export * from './AspectRatio';
-export * from './Blockquote';
-export * from './DeleteColumn';
-export * from './DeleteRow';
-export * from './FileWordOutline';
-export * from './Icon';
-export * from './LineHeight';
-export * from './MenuDown';
-export * from './SizeL';
-export * from './SizeM';
-export * from './SizeS';
-export * from './icons';

package/src/components/index.ts

@@ -1,9 +0,0 @@
-export * from './ActionButton';
-export * from './ActionMenuButton';
-export * from './BubbleMenu';
-export * from './ColorPicker';
-export * from './RichTextEditor';
-export * from './Toolbar';
-export * from './icons';
-export * from './menus';
-export * from './ui';

package/src/components/menus/bubble.ts

@@ -1,395 +0,0 @@
-import { deleteSelection } from '@tiptap/pm/commands';
-import type { Editor } from '@tiptap/react';
-
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
-import { BUBBLE_TEXT_LIST, IMAGE_SIZE, VIDEO_SIZE } from 'reactjs-tiptap-editor-pro/constants';
-import { localeActions } from 'reactjs-tiptap-editor-pro/locales';
-import type { ButtonViewParams, ButtonViewReturn, ExtensionNameKeys } from 'reactjs-tiptap-editor-pro/types';
-
-/** Represents the size types for bubble images or videos */
-type BubbleImageOrVideoSizeType = 'size-small' | 'size-medium' | 'size-large';
-type ImageAlignments = 'left' | 'center' | 'right';
-
-/** Represents the various types for bubble images */
-type BubbleImageType =
-  | `image-${BubbleImageOrVideoSizeType}`
-  | `video-${BubbleImageOrVideoSizeType}`
-  | 'image'
-  | 'image-aspect-ratio'
-  | 'remove';
-
-/** Represents the types for bubble videos */
-type BubbleVideoType = 'video' | 'remove';
-
-/** Represents the overall types for bubbles */
-type BubbleAllType =
-  | BubbleImageType
-  | BubbleVideoType
-  | ExtensionNameKeys
-  | 'divider'
-  | (string & {});
-
-/** Represents the key types for node types */
-export type NodeTypeKey = 'image' | 'text' | 'video';
-
-/** Represents the menu of bubble types for each node type */
-export type BubbleTypeMenu = Partial<Record<NodeTypeKey, BubbleMenuItem[]>>;
-
-/** Represents the menu of overall bubble types for each node type */
-export type NodeTypeMenu = Partial<Record<NodeTypeKey, BubbleAllType[]>>;
-
-/**
- * Represents the structure of a bubble menu item.
- */
-export interface BubbleMenuItem extends ButtonViewReturn {
-  /** The type of the bubble item */
-  type: BubbleAllType
-}
-
-/**
- * Represents a function to generate a bubble menu
- */
-/**
-   * Generates a bubble menu based on the provided options.
-   * @param {ButtonViewParams<T>} options - The options for generating the bubble menu.
-   * @returns {BubbleTypeMenu} The generated bubble menu.
-   */
-type BubbleView<T = any> = (options: ButtonViewParams<T>) => BubbleTypeMenu;
-
-/**
- * Represents the options for configuring bubbles.
- * @interface BubbleOptions
- * @template T
- */
-export interface BubbleOptions<T> {
-  /** The menu of bubble types for each node type. */
-  list: NodeTypeMenu
-  /** The default list of bubble types. */
-  defaultBubbleList: any
-  /** The function to generate a bubble menu. */
-  button: BubbleView<T>
-}
-
-function imageSizeMenus(editor: Editor): BubbleMenuItem[] {
-  const types: BubbleImageOrVideoSizeType[] = ['size-small', 'size-medium', 'size-large'];
-  const icons: NonNullable<ButtonViewReturn['componentProps']['icon']>[] = [
-    'SizeS',
-    'SizeM',
-    'SizeL',
-  ];
-
-  return types.map((size, i) => ({
-    type: `image-${size}`,
-    component: ActionButton,
-    componentProps: {
-      tooltip: localeActions.t(`editor.${size.replace('-', '.')}.tooltip` as any),
-      icon: icons[i],
-      action: () => editor.commands.updateImage({ width: IMAGE_SIZE[size] }),
-      isActive: () => editor.isActive('image', { width: IMAGE_SIZE[size] }),
-    },
-  }));
-}
-
-function imageGifSizeMenus(editor: Editor): BubbleMenuItem[] {
-  const types: BubbleImageOrVideoSizeType[] = ['size-small', 'size-medium', 'size-large'];
-  const icons: NonNullable<ButtonViewReturn['componentProps']['icon']>[] = [
-    'SizeS',
-    'SizeM',
-    'SizeL',
-  ];
-
-  return types.map((size, i) => ({
-    type: `image-${size}`,
-    component: ActionButton,
-    componentProps: {
-      tooltip: localeActions.t(`editor.${size.replace('-', '.')}.tooltip` as any),
-      icon: icons[i],
-      action: () => editor.commands.updateImageGif({ width: IMAGE_SIZE[size] }),
-      isActive: () => editor.isActive('image', { width: IMAGE_SIZE[size] }),
-    },
-  }));
-}
-
-function imageAlignMenus(editor: Editor): BubbleMenuItem[] {
-  const types: ImageAlignments[] = ['left', 'center', 'right'];
-  const iconMap: any = {
-    left: 'AlignLeft',
-    center: 'AlignCenter',
-    right: 'AlignRight',
-  };
-  return types.map(k => ({
-    type: `image-${k}`,
-    component: ActionButton,
-    componentProps: {
-      tooltip: localeActions.t(`editor.textalign.${k}.tooltip`),
-      icon: iconMap[k],
-      action: () => editor.commands?.setAlignImage?.(k),
-      isActive: () => editor.isActive({ align: k }) || false,
-      disabled: false,
-    },
-  }));
-}
-
-function imageGifAlignMenus(editor: Editor): BubbleMenuItem[] {
-  const types: ImageAlignments[] = ['left', 'center', 'right'];
-  const iconMap: any = {
-    left: 'AlignLeft',
-    center: 'AlignCenter',
-    right: 'AlignRight',
-  };
-  return types.map(k => ({
-    type: `image-${k}`,
-    component: ActionButton,
-    componentProps: {
-      tooltip: localeActions.t(`editor.textalign.${k}.tooltip`),
-      icon: iconMap[k],
-      action: () => editor.commands?.setAlignImageGif?.(k),
-      isActive: () => editor.isActive({ align: k }) || false,
-      disabled: false,
-    },
-  }));
-}
-
-function imageMermaidAlignMenus(editor: Editor): BubbleMenuItem[] {
-  const types: ImageAlignments[] = ['left', 'center', 'right'];
-  const iconMap: any = {
-    left: 'AlignLeft',
-    center: 'AlignCenter',
-    right: 'AlignRight',
-  };
-  return types.map(k => ({
-    type: `image-${k}`,
-    component: ActionButton,
-    componentProps: {
-      tooltip: localeActions.t(`editor.textalign.${k}.tooltip`),
-      icon: iconMap[k],
-      action: () => editor.commands?.setAlignImageMermaid?.(k),
-      isActive: () => editor.isActive({ align: k }) || false,
-      disabled: false,
-    },
-  }));
-}
-
-function imageDrawerAlignMenus(editor: Editor): BubbleMenuItem[] {
-  const types: ImageAlignments[] = ['left', 'center', 'right'];
-  const iconMap: any = {
-    left: 'AlignLeft',
-    center: 'AlignCenter',
-    right: 'AlignRight',
-  };
-  return types.map(k => ({
-    type: `image-${k}`,
-    component: ActionButton,
-    componentProps: {
-      tooltip: localeActions.t(`editor.textalign.${k}.tooltip`),
-      icon: iconMap[k],
-      action: () => editor.commands?.setAlignImageDrawer?.(k),
-      isActive: () => editor.isActive({ align: k }) || false,
-      disabled: false,
-    },
-  }));
-}
-
-function videoSizeMenus(editor: Editor): BubbleMenuItem[] {
-  const types: BubbleImageOrVideoSizeType[] = ['size-small', 'size-medium', 'size-large'];
-  const icons: NonNullable<ButtonViewReturn['componentProps']['icon']>[] = [
-    'SizeS',
-    'SizeM',
-    'SizeL',
-  ];
-
-  return types.map((size, i) => ({
-    type: `video-${size}`,
-    component: ActionButton,
-    componentProps: {
-      tooltip: localeActions.t(`editor.${size.replace('-', '.')}.tooltip` as any),
-      icon: icons[i],
-      action: () => editor.commands.updateVideo({ width: VIDEO_SIZE[size] }),
-      isActive: () => editor.isActive('video', { width: VIDEO_SIZE[size] }),
-    },
-  }));
-}
-export function getBubbleImage(editor: Editor): BubbleMenuItem[] {
-  return [
-    {
-      type: 'flipX',
-      component: ActionButton,
-      componentProps: {
-        editor,
-        tooltip: localeActions.t('editor.tooltip.flipX'),
-        icon: 'FlipX',
-        action: () => {
-          const image = editor.getAttributes('image');
-          const { flipX } = image as any;
-          editor
-            .chain()
-            .focus(undefined, { scrollIntoView: false })
-            .updateImage({
-              flipX: !flipX,
-            })
-            .run();
-        },
-      },
-    },
-    {
-      type: 'flipY',
-      component: ActionButton,
-      componentProps: {
-        editor,
-        tooltip: localeActions.t('editor.tooltip.flipY'),
-        icon: 'FlipY',
-        action: () => {
-          const image = editor.getAttributes('image');
-          const { flipY } = image as any;
-          editor
-            .chain()
-            .focus(undefined, { scrollIntoView: false })
-            .updateImage({
-              flipY: !flipY,
-            })
-            .run();
-        },
-      },
-    },
-    ...imageSizeMenus(editor),
-    ...imageAlignMenus(editor),
-    {
-      type: 'remove',
-      component: ActionButton,
-      componentProps: {
-        editor,
-        tooltip: localeActions.t('editor.remove'),
-        icon: 'Trash2',
-        action: () => {
-          const { state, dispatch } = editor.view;
-          deleteSelection(state, dispatch);
-        },
-      },
-    },
-  ];
-}
-
-export function getBubbleImageGif(editor: Editor): BubbleMenuItem[] {
-  return [
-    ...imageGifSizeMenus(editor),
-    ...imageGifAlignMenus(editor),
-    {
-      type: 'remove',
-      component: ActionButton,
-      componentProps: {
-        editor,
-        tooltip: localeActions.t('editor.remove'),
-        icon: 'Trash2',
-        action: () => {
-          const { state, dispatch } = editor.view;
-          deleteSelection(state, dispatch);
-        },
-      },
-    },
-  ];
-}
-
-export function getBubbleMermaid(editor: Editor): BubbleMenuItem[] {
-  return [
-    ...imageMermaidAlignMenus(editor),
-    {
-      type: 'edit',
-      component: ActionButton,
-      componentProps: {
-        editor,
-        tooltip: localeActions.t('editor.edit'),
-        icon: 'Pencil',
-        action: () => {
-          return true;
-        },
-      },
-    },
-    {
-      type: 'remove',
-      component: ActionButton,
-      componentProps: {
-        editor,
-        tooltip: localeActions.t('editor.remove'),
-        icon: 'Trash2',
-        action: () => {
-          const { state, dispatch } = editor.view;
-          deleteSelection(state, dispatch);
-        },
-      },
-    },
-  ];
-}
-
-export function getBubbleDrawer(editor: Editor): BubbleMenuItem[] {
-  return [
-    ...imageDrawerAlignMenus(editor),
-    {
-      type: 'edit',
-      component: ActionButton,
-      componentProps: {
-        editor,
-        tooltip: localeActions.t('editor.edit'),
-        icon: 'Pencil',
-        action: () => {
-          console.log('AAA');
-
-          return true;
-        },
-      },
-    },
-    {
-      type: 'remove',
-      component: ActionButton,
-      componentProps: {
-        editor,
-        tooltip: localeActions.t('editor.remove'),
-        icon: 'Trash2',
-        action: () => {
-          const { state, dispatch } = editor.view;
-          deleteSelection(state, dispatch);
-        },
-      },
-    },
-  ];
-}
-
-export function getBubbleVideo(editor: Editor): BubbleMenuItem[] {
-  return [
-    ...videoSizeMenus(editor),
-    {
-      type: 'remove',
-      component: ActionButton,
-      componentProps: {
-        editor,
-        tooltip: localeActions.t('editor.remove'),
-        icon: 'Trash2',
-        action: () => {
-          const { state, dispatch } = editor.view;
-          deleteSelection(state, dispatch);
-        },
-      },
-    },
-  ];
-}
-
-/**
- * Bubble menu text list
- */
-export function getBubbleText(editor: Editor, t: any, list: string[] = BUBBLE_TEXT_LIST) {
-  return list.reduce((acc, type) => {
-    if (type === 'divider' && acc.length > 0) {
-      return [...acc, {
-        type: 'divider',
-        component: undefined,
-        componentProps: {},
-      }];
-    }
-
-    const ext = editor.extensionManager.extensions.find(ext => ext.name === type);
-    if (ext) {
-      return [...acc, ext.configure().options.button({ editor, t, extension: ext })];
-    }
-
-    return acc;
-  }, [] as BubbleMenuItem[]);
-}

package/src/components/menus/components/BubbleMenuContent.tsx

@@ -1,15 +0,0 @@
-import { type PropsWithChildren } from 'react';
-
-function BubbleMenuContent ({ children, vertical }: PropsWithChildren<{ vertical?:boolean }>) {
-  return (
-    <div className="pointer-events-auto w-auto select-none rounded-sm !border border-neutral-200 bg-background px-3 py-2 shadow-sm transition-all dark:border-neutral-800">
-      <div
-        className={`relative flex h-[26px] flex-nowrap items-center justify-start gap-[4px] whitespace-nowrap ${vertical ? 'h-max flex-col' : ''}`}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export default BubbleMenuContent;