Merge pull request #307 from meliora/main

hunghg255 · web-flow · commit 048bc76fdc9d · 2025-10-24T23:45:51.000+07:00
diff --git a/docs/guide/toolbar.md b/docs/guide/toolbar.md
@@ -32,6 +32,15 @@ Bold.configure({
 />
 ```
 
+## Tooltips
+
+The tooltips of the extension buttons registered to the toolbar can be customized with
+
+### tooltipOptions 
+
+Type: `TooltipContentProps`\
+Default: `{}`
+
 ## ToolbarProps
 
 ```ts
@@ -51,5 +60,6 @@ export interface ToolbarRenderProps {
 }
 export interface ToolbarProps {
   render?: (props: ToolbarRenderProps, toolbarItems: ToolbarItemProps[], dom: JSX.Element[], containerDom: (innerContent: React.ReactNode) => React.ReactNode) => React.ReactNode
+  tooltipSide?: 'top' | 'bottom';
 }
 ```
diff --git a/src/components/ActionMenuButton.tsx b/src/components/ActionMenuButton.tsx
@@ -6,6 +6,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { Button, Tooltip, TooltipContent, TooltipTrigger, icons } from '@/components';
 import type { ButtonViewReturnComponentProps } from '@/types';
 import { getShortcutKeys } from '@/utils/plateform';
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
 
 export interface ActionMenuButtonProps {
   /** Icon name to display */
@@ -14,6 +15,8 @@ export interface ActionMenuButtonProps {
   title?: string
   /** Tooltip text */
   tooltip?: string
+  /** Tooltip options */
+  tooltipOptions?: TooltipContentProps    
   /** Whether the button is disabled */
   disabled?: boolean
   /** Keyboard shortcut keys */
@@ -55,7 +58,7 @@ const ActionMenuButton = React.forwardRef<HTMLButtonElement, ActionMenuButtonPro
           </Comp>
         </TooltipTrigger>
 
-        <TooltipContent>
+        <TooltipContent {...props.tooltipOptions}>
           <div className="richtext-flex richtext-max-w-24 richtext-flex-col richtext-items-center richtext-text-center">
             {props?.tooltip && <div>
               {props?.tooltip}
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
@@ -91,6 +91,10 @@ function Toolbar({ editor, disabled, toolbar }: ToolbarComponentProps) {
         <ButtonComponent
           {...item.button.componentProps}
           disabled={disabled || item?.button?.componentProps?.disabled}
+          tooltipOptions={{
+            ...item?.button?.componentProps?.tooltipOptions,
+            side: toolbar?.tooltipSide ?? 'top',
+          }}
         />
 
         {item?.divider && <Separator orientation="vertical" className="!richtext-h-auto !richtext-mx-2" />}
diff --git a/src/extensions/CodeBlock/components/CodeBlockActiveButton.tsx b/src/extensions/CodeBlock/components/CodeBlockActiveButton.tsx
@@ -4,13 +4,16 @@ import {
   ActionButton,
 } from '@/components';
 
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
+
 interface Props {
   editor: any
   disabled?: boolean
   color?: string
   shortcutKeys?: string[]
   maxHeight?: string | number
   tooltip?: string
+  tooltipOptions?: TooltipContentProps
   action: (language: string) => void
   icon?: any
 }
@@ -23,6 +26,7 @@ function CodeBlockActiveButton({ action, ...props }: Props) {
       disabled={props?.disabled}
       icon={props?.icon}
       tooltip={props?.tooltip}
+      tooltipOptions={props?.tooltipOptions}
     />
   );
 }
diff --git a/src/extensions/Color/components/ColorActionButton.tsx b/src/extensions/Color/components/ColorActionButton.tsx
@@ -6,13 +6,15 @@ import { debounce } from 'lodash-es';
 import { ActionButton, Button, ColorPicker } from '@/components';
 import { IconComponent } from '@/components/icons';
 import type { ButtonViewReturnComponentProps } from '@/types';
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
 
 interface ColorActionButtonProps {
   editor: Editor
   colors?: string[]
   defaultColor?: string
   icon?: React.ReactNode
   tooltip?: string
+  tooltipOptions?: TooltipContentProps
   disabled?: boolean
   action?: ButtonViewReturnComponentProps['action']
   isActive?: ButtonViewReturnComponentProps['isActive']
@@ -80,7 +82,7 @@ function ColorActionButton(props: ColorActionButtonProps) {
 
   return (
     <div className="richtext-flex richtext-items-center richtext-h-[32px]">
-      <ActionButton tooltip={props?.tooltip} disabled={props?.disabled} action={toggleColor}>
+      <ActionButton tooltip={props?.tooltip} disabled={props?.disabled} action={toggleColor} tooltipOptions={props?.tooltipOptions}>
         <span className="richtext-flex richtext-items-center richtext-justify-center richtext-text-sm">
           <IconC fill={selectedColor || props.initialDisplayedColor} />
         </span>
diff --git a/src/extensions/Drawer/components/DrawerActiveButton.tsx b/src/extensions/Drawer/components/DrawerActiveButton.tsx
@@ -15,14 +15,15 @@ import { Dialog, DialogContent, DialogFooter, DialogTitle, DialogTrigger } from
 import ControlDrawer from '@/extensions/Drawer/components/ControlDrawer/ControlDrawer';
 import { dataURLtoFile } from '@/utils/file';
 import { shortId } from '@/utils/shortId';
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
 
 interface IProps {
-  editor: Editor, upload?: any
+  editor: Editor, upload?: any, tooltipOptions?: TooltipContentProps
 }
 
 let clear = false;
 
-export const DrawerActiveButton: React.FC<IProps> = ({ editor, upload }) => {
+export const DrawerActiveButton: React.FC<IProps> = ({ editor, upload, tooltipOptions }) => {
   const [visible, toggleVisible] = useState(false);
   const refEditor = useRef<Editor4 | null>(null);
   const refWidget = useRef<any>(null);
@@ -195,6 +196,7 @@ export const DrawerActiveButton: React.FC<IProps> = ({ editor, upload }) => {
           action={() => toggleVisible(true)}
           icon="PencilRuler"
           tooltip="Drawer"
+          tooltipOptions={tooltipOptions}
         />
       </DialogTrigger>
 
diff --git a/src/extensions/Emoji/components/EmojiPicker/EmojiPicker.tsx b/src/extensions/Emoji/components/EmojiPicker/EmojiPicker.tsx
@@ -52,6 +52,7 @@ export function EmojiPickerComponent({ editor, icon, ...props }: any) {
       <ActionButton
         icon={icon}
         tooltip={props?.tooltip}
+        tooltipOptions={props?.tooltipOptions}
       />
     </EmojiPickerWrap>
   );
diff --git a/src/extensions/Excalidraw/components/ExcalidrawActiveButton.tsx b/src/extensions/Excalidraw/components/ExcalidrawActiveButton.tsx
@@ -9,12 +9,13 @@ import { ActionButton } from '@/components/ActionButton';
 import { Button } from '@/components/ui';
 import { Dialog, DialogContent, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { OPEN_EXCALIDRAW_SETTING_MODAL, cancelSubject, subject } from '@/utils/_event';
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
 
 interface IProps {
-  editor: Editor
+  editor: Editor, tooltipOptions?: TooltipContentProps
 }
 
-export const ExcalidrawActiveButton: React.FC<IProps> = ({ editor }) => {
+export const ExcalidrawActiveButton: React.FC<IProps> = ({ editor, tooltipOptions }) => {
   const excalidrawOptions = useMemo(() => {
     return editor.extensionManager.extensions.find(
       (ext: any) => ext.name === 'excalidraw'
@@ -107,6 +108,7 @@ export const ExcalidrawActiveButton: React.FC<IProps> = ({ editor }) => {
           action={() => toggleVisible(true)}
           icon="Excalidraw"
           tooltip="Excalidraw"
+          tooltipOptions={tooltipOptions}
         />
       </DialogTrigger>
 
diff --git a/src/extensions/FontFamily/components/FontFamilyButton.tsx b/src/extensions/FontFamily/components/FontFamilyButton.tsx
@@ -10,6 +10,7 @@ import {
 } from '@/components';
 import { useLocale } from '@/locales';
 import type { ButtonViewReturnComponentProps } from '@/types';
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
 
 export interface Item {
   title: string
@@ -31,6 +32,7 @@ interface Props {
   shortcutKeys?: string[]
   maxHeight?: string | number
   tooltip?: string
+  tooltipOptions?: TooltipContentProps
   items?: Item[]
 }
 
@@ -65,6 +67,7 @@ function FontFamilyButton(props: Props) {
           icon="MenuDown"
           title={active?.font?.length > 7 ? `${active?.font?.slice(0, 6)}...` : active?.font}
           tooltip={props?.tooltip}
+          tooltipOptions={props?.tooltipOptions}
         />
       </DropdownMenuTrigger>
 
diff --git a/src/extensions/FontSize/components/FontSizeMenuButton.tsx b/src/extensions/FontSize/components/FontSizeMenuButton.tsx
@@ -9,6 +9,7 @@ import {
 } from '@/components';
 import { useLocale } from '@/locales';
 import type { ButtonViewReturnComponentProps } from '@/types';
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
 
 export interface Item {
   title: string
@@ -27,6 +28,7 @@ interface IPropsFontSizeMenuButton {
   shortcutKeys?: string[]
   maxHeight?: string | number
   tooltip?: string
+  tooltipOptions?: TooltipContentProps
   items?: Item[]
 }
 
@@ -55,6 +57,7 @@ function FontSizeMenuButton(props: IPropsFontSizeMenuButton) {
           icon="MenuDown"
           title={active?.title}
           tooltip={`${props?.tooltip}`}
+          tooltipOptions={props?.tooltipOptions}
         />
       </DropdownMenuTrigger>
 
diff --git a/src/extensions/Heading/components/HeadingButton.tsx b/src/extensions/Heading/components/HeadingButton.tsx
@@ -11,6 +11,7 @@ import {
 } from '@/components';
 import type { ButtonViewReturnComponentProps } from '@/types';
 import { getShortcutKey } from '@/utils/plateform';
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
 
 export interface Item {
   title: string
@@ -32,6 +33,7 @@ interface Props {
   shortcutKeys?: string[]
   maxHeight?: string | number
   tooltip?: string
+  tooltipOptions?: TooltipContentProps
   items?: Item[]
 }
 
@@ -62,6 +64,7 @@ function HeadingButton(props: Props) {
           icon="MenuDown"
           title={active?.title}
           tooltip={props?.tooltip}
+          tooltipOptions={props?.tooltipOptions}
         />
       </DropdownMenuTrigger>
 
diff --git a/src/extensions/Image/Image.ts b/src/extensions/Image/Image.ts
@@ -328,46 +328,13 @@ export const Image = /* @__PURE__ */ TiptapImage.extend<IImageOptions>({
               return false;
             }
 
-            if( event.clipboardData.items.length == 2) {
-              event.clipboardData.items[0].getAsString( ( html: string) => {
-                let url = '';
-                html.replace( /src\s*=\s*"(.*)"/, (match, p0) => (url = p0) );
-
-                if (url && typeof url === 'string') {
-                  const node = view.state.schema.nodes.image.create({
-                    src: url
-                  });
-                  const transaction = view.state.tr.replaceSelectionWith(node);
-                  view.dispatch(transaction);
-                }
-              });
-
-              return;
-            }
-
             return handleImagePaste(view, event, uploadFn);
           },
           handleDrop: (view, event, _, moved) => {
             if (!(event instanceof DragEvent) || !event.dataTransfer) {
               return false;
             }
 
-            if(event.dataTransfer.items.length == 2) {
-              event.dataTransfer.items[0].getAsString( ( html: string) => {
-                let url = '';
-                html.replace( /src\s*=\s*"(.*)"/, (match, p0) => (url = p0) );
-
-                if (url && typeof url === 'string') {
-                  const node = view.state.schema.nodes.image.create({
-                    src: url
-                  });
-                  const transaction = view.state.tr.replaceSelectionWith(node);
-                  view.dispatch(transaction);
-                }
-              });
-
-              return;
-            }
             handleImageDrop(view, event, moved, uploadFn);
             return false;
           },
diff --git a/src/extensions/Image/components/ActionImageButton.tsx b/src/extensions/Image/components/ActionImageButton.tsx
@@ -145,6 +145,7 @@ function ActionImageButton(props: any) {
           action={() => setOpen(true)}
           icon={props.icon}
           tooltip={props.tooltip}
+          tooltipOptions={props.tooltipOptions}
         />
       </DialogTrigger>
 
diff --git a/src/extensions/ImageGif/components/ImageGifActionButton.tsx b/src/extensions/ImageGif/components/ImageGifActionButton.tsx
@@ -150,6 +150,7 @@ export function ImageGifActionButton({ editor, icon, provider, apiKey, ...props
       <ActionButton
         icon={icon}
         tooltip={props?.tooltip}
+        tooltipOptions={props?.tooltipOptions}
       />
     </ImageGifWrap>
   );
diff --git a/src/extensions/ImportWord/components/ImportWordButton.tsx b/src/extensions/ImportWord/components/ImportWordButton.tsx
@@ -7,6 +7,8 @@ import { ActionButton, useToast } from '@/components';
 import { useLocale } from '@/locales';
 import { hasExtension } from '@/utils/utils';
 
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
+
 function base64ToBlob(base64: any, mimeType: any) {
   const byteCharacters = atob(base64.split(',')[1]);
   const byteNumbers = Array.from({ length: byteCharacters.length });
@@ -26,6 +28,7 @@ interface ImportWordButtonProps {
   disabled?: boolean
   icon?: string
   tooltip?: string
+  tooltipOptions?: TooltipContentProps
   shortcutKeys?: string[]
   action?: () => boolean
   convert?: (file: File) => Promise<string>
@@ -133,6 +136,7 @@ function ImportWordButton(props: ImportWordButtonProps) {
         icon={props?.icon}
         loading={loading}
         tooltip={props?.tooltip}
+        tooltipOptions={props?.tooltipOptions}
       />
 
       <input
diff --git a/src/extensions/Katex/components/KatexActiveButton.tsx b/src/extensions/Katex/components/KatexActiveButton.tsx
@@ -62,6 +62,7 @@ function KatexActiveButton({ editor, ...props }: any) {
         <ActionButton
           icon={props?.icon}
           tooltip={props?.tooltip}
+          tooltipOptions={props?.tooltipOptions}
         />
       </PopoverTrigger>
 
diff --git a/src/extensions/LineHeight/components/LineHeightDropdown.tsx b/src/extensions/LineHeight/components/LineHeightDropdown.tsx
@@ -11,10 +11,13 @@ import {
 import { useLocale } from '@/locales';
 import type { ButtonViewReturnComponentProps } from '@/types';
 
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
+
 interface IPropsLineHeightDropdown {
   editor: any
   icon?: any
   tooltip?: string
+  tooltipOptions?: TooltipContentProps
   disabled?: boolean
   action?: ButtonViewReturnComponentProps['action']
   isActive?: ButtonViewReturnComponentProps['isActive']
@@ -66,6 +69,7 @@ function LineHeightDropdown(props: IPropsLineHeightDropdown) {
           disabled={props?.disabled}
           icon="LineHeight"
           tooltip={props?.tooltip}
+          tooltipOptions={props?.tooltipOptions}
         >
           <IconComponent className="richtext-ml-1 richtext-size-3 richtext-text-zinc-500"
             name="MenuDown"
diff --git a/src/extensions/Link/components/LinkEditPopover.tsx b/src/extensions/Link/components/LinkEditPopover.tsx
@@ -3,12 +3,14 @@ import { useState } from 'react';
 import { ActionButton, IconComponent, Popover, PopoverContent, PopoverTrigger } from '@/components';
 import LinkEditBlock from '@/extensions/Link/components/LinkEditBlock';
 import type { ButtonViewReturnComponentProps } from '@/types';
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
 
 interface IPropsLinkEditPopover {
   editor: any
   icon?: any
   title?: string
   tooltip?: string
+  tooltipOptions?: TooltipContentProps
   disabled?: boolean
   shortcutKeys?: string[]
   isActive?: ButtonViewReturnComponentProps['isActive']
@@ -31,6 +33,7 @@ function LinkEditPopover(props: IPropsLinkEditPopover) {
       <PopoverTrigger disabled={props?.disabled} asChild>
         <ActionButton
           tooltip={props?.tooltip}
+          tooltipOptions={props?.tooltipOptions}
           isActive={props?.isActive}
           disabled={props?.disabled}
         >
diff --git a/src/extensions/Mermaid/components/MermaidActiveButton.tsx b/src/extensions/Mermaid/components/MermaidActiveButton.tsx
diff --git a/src/extensions/SearchAndReplace/components/SearchAndReplaceButton.tsx b/src/extensions/SearchAndReplace/components/SearchAndReplaceButton.tsx
diff --git a/src/extensions/Table/components/TableActionButton.tsx b/src/extensions/Table/components/TableActionButton.tsx
diff --git a/src/extensions/TableOfContent/components/TableOfContentActionButton.tsx b/src/extensions/TableOfContent/components/TableOfContentActionButton.tsx
diff --git a/src/extensions/TextAlign/components/TextAlignMenuButton.tsx b/src/extensions/TextAlign/components/TextAlignMenuButton.tsx
diff --git a/src/extensions/TextDirection/components/TextDirectionButton.tsx b/src/extensions/TextDirection/components/TextDirectionButton.tsx
diff --git a/src/extensions/Twitter/components/TwitterActiveButton.tsx b/src/extensions/Twitter/components/TwitterActiveButton.tsx
diff --git a/src/extensions/Video/components/ActiveVideoButton.tsx b/src/extensions/Video/components/ActiveVideoButton.tsx
diff --git a/src/types.ts b/src/types.ts
