reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

package/src/components/menus/bubble.ts

@@ -0,0 +1,395 @@
+import { deleteSelection } from '@tiptap/pm/commands';
+import type { Editor } from '@tiptap/react';
+
+import { ActionButton } from '@/components';
+import { BUBBLE_TEXT_LIST, IMAGE_SIZE, VIDEO_SIZE } from '@/constants';
+import { localeActions } from '@/locales';
+import type { ButtonViewParams, ButtonViewReturn, ExtensionNameKeys } from '@/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

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

@@ -0,0 +1,128 @@
+import { Fragment, useMemo } from 'react';
+
+import type { Editor } from '@tiptap/react';
+import { BubbleMenu as BubbleMenuReact } from '@tiptap/react';
+
+import { Separator, getBubbleDrawer } from '@/components';
+import { Drawer } from '@/extensions';
+import { EditDrawerBlock } from '@/extensions/Drawer/components/EditDrawerBlock';
+import { useAttributes } from '@/hooks/useAttributes';
+import { useExtension } from '@/hooks/useExtension';
+import { useLocale } from '@/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

@@ -0,0 +1,91 @@
+import { useCallback, useEffect } from 'react';
+
+import { BubbleMenu } from '@tiptap/react';
+import { useAttributes } from '@/hooks/useAttributes';
+import { ActionButton } from '@/components/ActionButton';
+import { SizeSetter } from '@/components/SizeSetter/SizeSetter';
+import { useLocale } from '@/locales';
+import type { IExcalidrawAttrs } from '@/extensions/Excalidraw';
+import { Excalidraw } from '@/extensions/Excalidraw';
+import { triggerOpenExcalidrawSettingModal } from '@/utils/_event';
+import { deleteNode } from '@/utils/delete-node';
+import { getEditorContainerDOMSize } from '@/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>
+  );
+}