reactjs-tiptap-editor-pro 0.2.31 → 0.2.32

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;

package/src/components/menus/components/BubbleMenuDrawer.tsx

@@ -1,128 +0,0 @@
-import { Fragment, useMemo } from 'react';
-
-import type { Editor } from '@tiptap/react';
-import { BubbleMenu as BubbleMenuReact } from '@tiptap/react';
-
-import { Separator, getBubbleDrawer } from 'reactjs-tiptap-editor-pro/components';
-import { Drawer } from 'reactjs-tiptap-editor-pro/extensions';
-import { EditDrawerBlock } from 'reactjs-tiptap-editor-pro/extensions/Drawer/components/EditDrawerBlock';
-import { useAttributes } from 'reactjs-tiptap-editor-pro/hooks/useAttributes';
-import { useExtension } from 'reactjs-tiptap-editor-pro/hooks/useExtension';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-
-interface IPropsBubbleMenu {
-  editor: Editor
-  disabled?: boolean
-}
-
-const tippyOptions = {
-  maxWidth: 'auto',
-  zIndex: 20,
-  appendTo: 'parent',
-  moveTransition: 'transform 0.1s ease-out',
-};
-
-function ItemA({ item, disabled, editor }: any) {
-  const Comp = item.component;
-
-  if (!Comp) {
-    return <></>;
-  }
-
-  return (
-    <Fragment>
-      {item.type === 'divider'
-        ? (
-          <Separator className="!mx-1 !my-2 !h-[16px]"
-            orientation="vertical"
-          />
-        )
-        : (
-          <Comp
-            {...item.componentProps}
-            disabled={disabled || item?.componentProps?.disabled}
-            editor={editor}
-          />
-        )}
-    </Fragment>
-  );
-}
-
-function isDrawerNode(node: any) {
-  return node.type.name === 'drawer';
-}
-
-function BubbleMenuDrawer(props: IPropsBubbleMenu) {
-  const { lang } = useLocale();
-
-  const attrs = useAttributes<any>(props.editor, Drawer.name);
-
-  const extension = useExtension(props.editor, Drawer.name);
-
-  const shouldShow = ({ editor }: any) => {
-    const { selection } = editor.view.state;
-    const { $from, to } = selection;
-    let isDrawer = false;
-
-    editor.view.state.doc.nodesBetween($from.pos, to, (node: any) => {
-      if (isDrawerNode(node)) {
-        isDrawer = true;
-        return false; // Stop iteration if an mermaid is found
-      }
-    });
-
-    return isDrawer;
-  };
-
-  const items = useMemo(() => {
-    if (props.disabled) {
-      return [];
-    }
-    return getBubbleDrawer(props.editor);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.disabled, props.editor, lang]);
-
-  return (
-    <>
-      <BubbleMenuReact
-        editor={props?.editor}
-        shouldShow={shouldShow}
-        tippyOptions={tippyOptions as any}
-      >
-        {items?.length
-          ? (
-            <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 whitespace-nowrap">
-                {items?.map((item: any, key: any) => {
-                  if (item.type === 'edit' && attrs?.src) {
-                    return (
-                      <EditDrawerBlock
-                        attrs={attrs}
-                        editor={props.editor}
-                        extension={extension}
-                        key={`bubbleMenu-drawer-${key}`}
-                      />
-                    );
-                  }
-
-                  return (
-                    <ItemA
-                      disabled={props.disabled}
-                      editor={props.editor}
-                      item={item}
-                      key={`bubbleMenu-drawer-${key}`}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          )
-          : (
-            <></>
-          )}
-      </BubbleMenuReact>
-    </>
-  );
-}
-
-export { BubbleMenuDrawer };

package/src/components/menus/components/BubbleMenuExcalidraw.tsx

@@ -1,91 +0,0 @@
-import { useCallback, useEffect } from 'react';
-
-import { BubbleMenu } from '@tiptap/react';
-import { useAttributes } from 'reactjs-tiptap-editor-pro/hooks/useAttributes';
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components/ActionButton';
-import { SizeSetter } from 'reactjs-tiptap-editor-pro/components/SizeSetter/SizeSetter';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-import type { IExcalidrawAttrs } from 'reactjs-tiptap-editor-pro/extensions/Excalidraw';
-import { Excalidraw } from 'reactjs-tiptap-editor-pro/extensions/Excalidraw';
-import { triggerOpenExcalidrawSettingModal } from 'reactjs-tiptap-editor-pro/utils/_event';
-import { deleteNode } from 'reactjs-tiptap-editor-pro/utils/delete-node';
-import { getEditorContainerDOMSize } from 'reactjs-tiptap-editor-pro/utils/editor-container-size';
-
-export function BubbleMenuExcalidraw({ editor }: any) {
-  const { t } = useLocale();
-  const { width: maxWidth } = getEditorContainerDOMSize(editor);
-  const attrs = useAttributes<IExcalidrawAttrs>(editor, Excalidraw.name, {
-    defaultShowPicker: false,
-    createUser: '',
-    width: 0,
-    height: 0,
-  });
-  const { defaultShowPicker, createUser, width, height } = attrs;
-
-  const setSize = useCallback(
-    (size: any) => {
-      editor
-        .chain()
-        .updateAttributes(Excalidraw.name, size)
-        .setNodeSelection(editor.state.selection.from)
-        .focus()
-        .run();
-    },
-    [editor],
-  );
-  const openEditLinkModal = useCallback(() => {
-    triggerOpenExcalidrawSettingModal(attrs);
-  }, [editor, attrs]);
-  const shouldShow = useCallback(() => editor.isActive(Excalidraw.name), [editor]);
-  const deleteMe = useCallback(() => deleteNode(Excalidraw.name, editor), [editor]);
-
-  useEffect(() => {
-    if (defaultShowPicker) {
-      openEditLinkModal();
-      editor.chain().updateAttributes(Excalidraw.name, { defaultShowPicker: false }).focus().run();
-    }
-  }, [createUser, defaultShowPicker, editor, openEditLinkModal]);
-
-  return (
-    <BubbleMenu
-      className="bubble-menu"
-      editor={editor}
-      pluginKey="excalidraw-bubble-menu"
-      shouldShow={shouldShow}
-      tippyOptions={{
-        popperOptions: {
-          modifiers: [{ name: 'flip', enabled: false }],
-        },
-        placement: 'bottom-start',
-        offset: [-2, 16],
-        zIndex: 9999,
-        // onHidden: () => {
-        //   toggleVisible(false)
-        // },
-      }}
-    >
-      <div className="w-auto px-3 py-2 transition-all !border rounded-sm shadow-sm pointer-events-auto select-none border-neutral-200 dark:border-neutral-800 bg-background">
-
-        <ActionButton
-          icon="Pencil"
-          action={openEditLinkModal}
-          tooltip={t('editor.edit')}
-        />
-
-        <SizeSetter width={width as any} maxWidth={maxWidth} height={height as any} onOk={setSize}>
-          <ActionButton
-            icon="Settings"
-            tooltip={t('editor.settings')}
-          />
-        </SizeSetter>
-
-        <ActionButton
-          icon="Trash2"
-          action={deleteMe}
-          tooltip={t('editor.delete')}
-        />
-
-      </div>
-    </BubbleMenu>
-  );
-}