reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

package/src/components/menus/components/TableBubbleMenu.tsx

@@ -0,0 +1,362 @@
+import { useCallback, useMemo } from 'react';
+
+import type { Editor } from '@tiptap/core';
+import { isActive } from '@tiptap/core';
+import { TextSelection } from '@tiptap/pm/state';
+import { BubbleMenu } from '@tiptap/react';
+import type { GetReferenceClientRect } from 'tippy.js';
+import { sticky } from 'tippy.js';
+
+import { ActionButton, type ActionButtonProps, getBubbleText, ItemA, Separator } from 'reactjs-tiptap-editor-pro/components';
+import HighlightActionButton from 'reactjs-tiptap-editor-pro/extensions/Highlight/components/HighlightActionButton';
+import {
+  isColumnGripSelected,
+  isRowGripSelected,
+} from 'reactjs-tiptap-editor-pro/extensions/Table/utils';
+import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
+import { type ShouldShowProps } from 'reactjs-tiptap-editor-pro/types';
+
+import BubbleMenuContent from './BubbleMenuContent';
+
+export interface TableBubbleMenuProps {
+  editor: Editor;
+  disabled?: boolean;
+  actions?: ActionButtonProps[];
+  items?: string[]
+}
+
+function TableRowBubbleMenu ({ editor, disabled }: TableBubbleMenuProps) {
+  const { t } = useLocale();
+  const shouldShow = useCallback(
+    ({ view, state, from }: ShouldShowProps) => {
+      if (!state || !from) {
+        return false;
+      }
+
+      return isRowGripSelected({ editor, view, state, from });
+    },
+    [editor]
+  );
+  function onAddRowAbove() {
+    editor.chain().focus().addRowBefore().run();
+  }
+
+  function onAddRowBelow() {
+    editor.chain().focus().addRowAfter().run();
+  }
+
+  function onDeleteRow() {
+    editor.chain().focus().deleteRow().run();
+  }
+  if(disabled) {
+    return null;
+  }
+  return (
+    <BubbleMenu
+      editor={editor}
+      pluginKey="tableRowMenu"
+      shouldShow={shouldShow}
+      updateDelay={0}
+      tippyOptions={{
+        placement: 'left',
+        offset: [0, 15],
+        popperOptions: {
+          modifiers: [{ name: 'flip', enabled: false }],
+        },
+      }}
+    >
+      <BubbleMenuContent vertical>
+        <ActionButton
+          action={onAddRowAbove}
+          disabled={!editor?.can().addRowBefore?.()}
+          icon="BetweenVerticalEnd"
+          tooltip={t('editor.table.menu.insertRowAbove')}
+          tooltip-options={{
+            sideOffset: 15,
+          }}
+        />
+
+        <ActionButton
+          action={onAddRowBelow}
+          disabled={!editor?.can()?.addRowAfter?.()}
+          icon="BetweenVerticalStart"
+          tooltip={t('editor.table.menu.insertRowBelow')}
+          tooltip-options={{
+            sideOffset: 15,
+          }}
+        />
+
+        <ActionButton
+          action={onDeleteRow}
+          disabled={!editor?.can()?.deleteRow?.()}
+          icon="DeleteRow"
+          tooltip={t('editor.table.menu.deleteRow')}
+          tooltip-options={{
+            sideOffset: 15,
+          }}
+        />
+      </BubbleMenuContent>
+    </BubbleMenu>
+  );
+}
+
+function TableColBubbleMenu({ editor, disabled }: TableBubbleMenuProps) {
+  const { t } = useLocale();
+  const shouldShow = useCallback(
+    ({ view, state, from }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return isColumnGripSelected({ editor, view, state, from: from || 0 });
+    },
+    [editor]
+  );
+
+  function onAddColumnBefore() {
+    editor.chain().focus().addColumnBefore().run();
+  }
+
+  function onAddColumnAfter() {
+    editor.chain().focus().addColumnAfter().run();
+  }
+
+  function onDeleteColumn() {
+    editor.chain().focus().deleteColumn().run();
+  }
+
+  if(disabled) {
+    return null;
+  }
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      pluginKey="tableColumnMenu"
+      shouldShow={shouldShow}
+      updateDelay={0}
+      tippyOptions={{
+        offset: [0, 15],
+        popperOptions: {
+          modifiers: [{ name: 'flip', enabled: false }],
+        },
+      }}
+    >
+      <BubbleMenuContent>
+        <ActionButton
+          action={onAddColumnBefore}
+          disabled={!editor?.can()?.addColumnBefore?.()}
+          icon="BetweenHorizonalEnd"
+          tooltip={t('editor.table.menu.insertColumnBefore')}
+          tooltip-options={{
+            sideOffset: 15,
+          }}
+        />
+
+        <ActionButton
+          action={onAddColumnAfter}
+          disabled={!editor?.can()?.addColumnAfter?.()}
+          icon="BetweenHorizonalStart"
+          tooltip={t('editor.table.menu.insertColumnAfter')}
+          tooltip-options={{
+            sideOffset: 15,
+          }}
+        />
+
+        <ActionButton
+          action={onDeleteColumn}
+          disabled={!editor?.can().deleteColumn?.()}
+          icon="DeleteColumn"
+          tooltip={t('editor.table.menu.deleteColumn')}
+          tooltip-options={{
+            sideOffset: 15,
+          }}
+        />
+      </BubbleMenuContent>
+    </BubbleMenu>
+  );
+}
+
+function TableMainBubbleMenu({ editor, disabled, actions, ...props }: TableBubbleMenuProps) {
+
+  const shouldSelectionShow = ({ editor, view, state, from }: ShouldShowProps) => {
+    const { selection } = editor.view.state;
+    const { $from, to } = selection;
+
+    // check content select length is not empty
+    if ($from.pos === to) {
+      return false;
+    }
+
+    if (!state || !from) {
+      return false;
+    }
+
+    return (
+      selection instanceof TextSelection ||
+      isRowGripSelected({ editor, view, state, from }) ||
+      isColumnGripSelected({ editor, view, state, from })
+    );
+  };
+
+  const shouldActiveShow = ({ editor }: { editor: Editor }) => {
+    return isActive(editor.view.state, 'table');
+  };
+  const shouldShow = (showProps: ShouldShowProps) => {
+    return shouldActiveShow(showProps) && !shouldSelectionShow(showProps);
+  };
+  const { t, lang } = useLocale();
+
+  function onMergeCell() {
+    editor.chain().focus().mergeCells().run();
+  }
+  function onSplitCell() {
+    editor?.chain().focus().splitCell().run();
+  }
+  function onDeleteTable() {
+    editor.chain().focus().deleteTable().run();
+  }
+
+  function onSetCellBackground(color: string) {
+    editor.chain().focus().setTableCellBackground(color).run();
+  }
+  const getReferenceClientRect: GetReferenceClientRect = () => {
+    const {
+      view,
+      state: {
+        selection: { from },
+      },
+    } = editor;
+
+    const node = view.domAtPos(from).node as HTMLElement;
+    if (!node) {
+      return new DOMRect(-1000, -1000, 0, 0);
+    }
+
+    const tableWrapper = node?.closest?.('.tableWrapper');
+    if (!tableWrapper) {
+      return new DOMRect(-1000, -1000, 0, 0);
+    }
+
+    const rect = tableWrapper.getBoundingClientRect();
+
+    return rect;
+  };
+
+  const items = useMemo(() => {
+    if (disabled || !editor) {
+      return [];
+    }
+
+    return getBubbleText(editor, t, props.items || []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, editor, props.items, lang, t]);
+
+  if(disabled) {
+    return null;
+  }
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      pluginKey="table"
+      shouldShow={shouldShow}
+      updateDelay={0}
+      tippyOptions={{
+        offset: [0, 15],
+        popperOptions: {
+          modifiers: [{ name: 'flip', enabled: false }],
+        },
+        maxWidth: 'auto',
+        getReferenceClientRect,
+        plugins: [sticky],
+        sticky: 'popper',
+      }}
+    >
+      <BubbleMenuContent>
+        {actions && (
+          <>
+            {actions.map((item, i) => (
+              <ActionButton key={i} {...item} />
+            ))}
+
+            <Separator
+              className="!mx-1 !my-2 !h-[16px]"
+              orientation="vertical"
+            />
+          </>
+        )}
+
+        {props.items && (
+          <>
+            {items.map((item, i) => (
+              <ItemA
+                key={i}
+                disabled={disabled}
+                editor={editor}
+                item={item} />
+            ))}
+
+            <Separator
+              className="!mx-1 !my-2 !h-[16px]"
+              orientation="vertical"
+            />
+          </>
+        )}
+
+        <ActionButton
+          action={onMergeCell}
+          disabled={!editor?.can()?.mergeCells?.()}
+          icon="TableCellsMerge"
+          tooltip={t('editor.table.menu.mergeCells')}
+          tooltip-options={{
+            sideOffset: 15,
+          }}
+        />
+
+        <ActionButton
+          action={onSplitCell}
+          disabled={!editor?.can()?.splitCell?.()}
+          icon="TableCellsSplit"
+          tooltip={t('editor.table.menu.splitCells')}
+          tooltip-options={{
+            sideOffset: 15,
+          }}
+        />
+
+        <Separator className="!mx-1 !my-2 !h-[16px]" orientation="vertical" />
+
+        <HighlightActionButton
+          action={onSetCellBackground}
+          editor={editor}
+          tooltip={t('editor.table.menu.setCellsBgColor')}
+          tooltipOptions={{
+            sideOffset: 15,
+          }}
+        />
+
+        <ActionButton
+          action={onDeleteTable}
+          disabled={!editor?.can()?.deleteTable?.()}
+          icon="Trash2"
+          tooltip={t('editor.table.menu.deleteTable')}
+          tooltip-options={{
+            sideOffset: 15,
+          }}
+        />
+      </BubbleMenuContent>
+    </BubbleMenu>
+  );
+}
+
+function TableBubbleMenu(props: TableBubbleMenuProps) {
+  return (
+    <>
+      <TableMainBubbleMenu {...props} />
+      <TableRowBubbleMenu {...props} />
+      <TableColBubbleMenu {...props} />
+    </>
+  );
+}
+
+export { TableBubbleMenu };

package/src/components/menus/index.ts

@@ -0,0 +1,7 @@
+export * from './bubble';
+export * from './components/ContentMenu';
+export * from './components/BubbleMenuText';
+export * from './components/TableBubbleMenu';
+export * from './components/BubbleMenuLink';
+export * from './components/BubbleMenuMedia';
+export * from './components/ColumnsBubbleMenu';

package/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import { cn } from 'reactjs-tiptap-editor-pro/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: '!bg-primary !text-primary-foreground hover:!bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from 'reactjs-tiptap-editor-pro/lib/utils';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      '!peer !h-4 !w-4 !p-0 !shrink-0 !rounded-sm !border !border-primary !ring-offset-background focus-visible:!outline-none focus-visible:!ring-2 focus-visible:!ring-ring focus-visible:!ring-offset-2 disabled:!cursor-not-allowed disabled:!opacity-50 data-[state=checked]:!bg-primary data-[state=checked]:!text-primary-foreground',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('!flex !p-0 !items-center !justify-center !text-current')}
+    >
+      <Check className="!h-4 !w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/components/ui/dialog.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from 'reactjs-tiptap-editor-pro/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'dialog-content fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">
+          Close
+        </span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col space-y-1.5 text-center sm:text-left',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+DialogHeader.displayName = 'DialogHeader';
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};