reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactjs-tiptap-editor-pro",
   "type": "module",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "packageManager": "pnpm@8.15.9",
   "description": "A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React",
   "license": "MIT",
@@ -28,64 +28,13 @@
     "tiptap-react-rc-rich-text"
   ],
   "sideEffects": false,
-  "main": "./lib/index.cjs",
-  "module": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
   "exports": {
-    ".": {
-      "require": {
-        "types": "./lib/index.d.cts",
-        "default": "./lib/index.cjs"
-      },
-      "import": {
-        "types": "./lib/index.d.ts",
-        "default": "./lib/index.js"
-      }
-    },
-    "./extension-bundle": {
-      "require": {
-        "types": "./lib/extension-bundle.d.cts",
-        "default": "./lib/extension-bundle.cjs"
-      },
-      "import": {
-        "types": "./lib/extension-bundle.d.ts",
-        "default": "./lib/extension-bundle.js"
-      }
-    },
-    "./locale-bundle": {
-      "require": {
-        "types": "./lib/locale-bundle.d.cts",
-        "default": "./lib/locale-bundle.cjs"
-      },
-      "import": {
-        "types": "./lib/locale-bundle.d.ts",
-        "default": "./lib/locale-bundle.js"
-      }
-    },
-    "./style.css": {
-      "require": "./lib/style.css",
-      "import": "./lib/style.css"
-    },
-    "./lib/*": "./lib/*",
-    "./package.json": "./package.json",
-    "./*": "./lib/*"
-  },
-  "typesVersions": {
-    "*": {
-      "extension-bundle": [
-        "./lib/extension-bundle.d.ts"
-      ],
-      "locale-bundle": [
-        "./lib/locale-bundle.d.ts"
-      ],
-      "*": [
-        "./lib/*",
-        "./*"
-      ]
-    }
+    "./*": "./src/*"
   },
   "files": [
-    "lib",
+    "src",
     "package.json",
     "README.md",
     "LICENSE"
@@ -222,8 +171,6 @@
     "commit-msg": "npm run verify-commit"
   },
   "scripts": {
-    "build:lib": "vite build && pnpm modify-css",
-    "build:lib:dev": "vite build  --mode development --watch",
     "build:playground": "pnpm build:lib && pnpm --dir ./playground run build",
     "docs:dev": "pnpm --parallel --filter docs... dev",
     "docs:build": "pnpm --filter docs... build",

package/src/components/ActionButton.tsx

@@ -0,0 +1,103 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react/display-name */
+import React from 'react';
+
+import { Slot } from '@radix-ui/react-slot';
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
+
+import { Toggle, Tooltip, TooltipContent, TooltipTrigger, IconComponent as Icon } from 'reactjs-tiptap-editor-pro/components';
+import { cn } from 'reactjs-tiptap-editor-pro/lib/utils';
+import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/types';
+import { getShortcutKeys } from 'reactjs-tiptap-editor-pro/utils/plateform';
+
+export interface ActionButtonProps {
+  /* Icon name to display */
+  icon?: string
+  /* Button title */
+  title?: string
+  /* Tooltip text */
+  tooltip?: string
+  /* Whether the button is disabled */
+  disabled?: boolean
+  /* Keyboard shortcut keys */
+  shortcutKeys?: string[]
+  /* Custom CSS class */
+  customClass?: string
+  /* Loading state */
+  loading?: boolean
+  /* Tooltip options */
+  tooltipOptions?: TooltipContentProps
+  /* Button color */
+  color?: string
+  /* Click action handler */
+  action?: ButtonViewReturnComponentProps['action']
+  /* Active state checker */
+  isActive?: ButtonViewReturnComponentProps['isActive']
+  /* Child components */
+  children?: React.ReactNode
+  /* Whether to render as child */
+  asChild?: boolean
+  /* Whether it's an upload button */
+  upload?: boolean
+}
+
+const ActionButton = React.forwardRef<HTMLButtonElement, Partial<ActionButtonProps>>(
+  (props, ref) => {
+    const {
+      icon = undefined,
+      // title = undefined,
+      tooltip = undefined,
+      disabled = false,
+      customClass = '',
+      // color = undefined,
+      loading = undefined,
+      shortcutKeys = undefined,
+      tooltipOptions = {},
+      action = undefined,
+      isActive = undefined,
+      children,
+      asChild = false,
+      upload = false,
+      ...rest
+    } = props;
+    const Comp = asChild ? Slot : Toggle;
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Comp
+            data-state={isActive?.() ? 'on' : 'off'}
+            onClick={action}
+            ref={ref}
+            size="sm"
+            className={cn('w-[32px] h-[32px]', customClass)}
+            // pressed={isActive?.() || false}
+            disabled={disabled}
+            {...(rest as Omit<typeof rest, 'loading'>)}
+          >
+            {icon && <Icon name={icon} className="size-4" />}
+            {children}
+          </Comp>
+        </TooltipTrigger>
+
+        {tooltip && (
+          <TooltipContent {...tooltipOptions}>
+            <div className="flex max-w-24 flex-col items-center text-center">
+              <div>
+                {tooltip}
+              </div>
+
+              {!!shortcutKeys?.length && <span>
+                {getShortcutKeys(shortcutKeys)}
+              </span>}
+            </div>
+          </TooltipContent>
+        )}
+      </Tooltip>
+    );
+  },
+);
+
+export {
+  ActionButton,
+};

package/src/components/ActionMenuButton.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+
+import { Slot } from '@radix-ui/react-slot';
+
+import { Button, Tooltip, TooltipContent, TooltipTrigger, icons } from 'reactjs-tiptap-editor-pro/components';
+import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/types';
+import { getShortcutKeys } from 'reactjs-tiptap-editor-pro/utils/plateform';
+
+export interface ActionMenuButtonProps {
+  /** Icon name to display */
+  icon?: any
+  /** Button title text */
+  title?: string
+  /** Tooltip text */
+  tooltip?: string
+  /** Whether the button is disabled */
+  disabled?: boolean
+  /** Keyboard shortcut keys */
+  shortcutKeys?: string[]
+  /** Button color */
+  color?: string
+  /** Click action handler */
+  action?: ButtonViewReturnComponentProps['action']
+  /** Active state checker */
+  isActive?: ButtonViewReturnComponentProps['isActive']
+  /** Whether to render as child */
+  asChild?: boolean
+}
+
+const ActionMenuButton = React.forwardRef<HTMLButtonElement, ActionMenuButtonProps>(
+  ({ asChild, ...props }, ref) => {
+    const Icon = icons[props.icon];
+    const Comp = asChild ? Slot : Button;
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Comp
+            className="h-[32px] min-w-24 overflow-hidden px-[5px]  py-0"
+            disabled={props?.disabled}
+            ref={ref}
+            variant="ghost"
+            {...props}
+          >
+            <div className="flex h-full items-center font-normal">
+              {props?.title && (
+                <div className="grow truncate text-left text-sm">
+                  {props?.title}
+                </div>
+              )}
+
+              {Icon && <Icon className="ml-1 size-3 shrink-0 text-zinc-500" />}
+            </div>
+          </Comp>
+        </TooltipTrigger>
+
+        <TooltipContent>
+          <div className="flex max-w-24 flex-col items-center text-center">
+            {props?.tooltip && <div>
+              {props?.tooltip}
+            </div>}
+
+            <div className="flex">
+              {!!props?.shortcutKeys?.length && <span>
+                {getShortcutKeys(props?.shortcutKeys)}
+              </span>}
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    );
+  },
+);
+
+export { ActionMenuButton };

package/src/components/BubbleMenu.tsx

@@ -0,0 +1,93 @@
+import type { Editor } from '@tiptap/core';
+
+import { BubbleMenuImage, BubbleMenuImageGif, BubbleMenuLink, BubbleMenuText, BubbleMenuVideo, ColumnsBubbleMenu, ContentMenu, TableBubbleMenu } from 'reactjs-tiptap-editor-pro/components';
+import { BubbleMenuDrawer } from 'reactjs-tiptap-editor-pro/components/menus/components/BubbleMenuDrawer';
+import { BubbleMenuExcalidraw } from 'reactjs-tiptap-editor-pro/components/menus/components/BubbleMenuExcalidraw';
+import { BubbleMenuIframe } from 'reactjs-tiptap-editor-pro/components/menus/components/BubbleMenuIframe';
+import BubbleMenuKatex from 'reactjs-tiptap-editor-pro/components/menus/components/BubbleMenuKatex';
+import { BubbleMenuMermaid } from 'reactjs-tiptap-editor-pro/components/menus/components/BubbleMenuMermaid';
+import { BubbleMenuTwitter } from 'reactjs-tiptap-editor-pro/components/menus/components/BubbleMenuTwitter';
+import { Image, ImageGif } from 'reactjs-tiptap-editor-pro/extensions';
+import type { BubbleMenuProps as BubbleMenuPropsType } from 'reactjs-tiptap-editor-pro/types';
+
+export interface BubbleMenuComponentProps {
+  editor: Editor
+  disabled?: boolean
+  bubbleMenu?: BubbleMenuPropsType
+}
+
+/**
+ * Bubble Menu Component
+ *
+ * @param editor Editor instance
+ * @param disabled Whether the menu is disabled
+ * @param bubbleMenu Bubble menu configuration
+ * @returns Bubble menu component
+ */
+export function BubbleMenu({ editor, disabled, bubbleMenu }: BubbleMenuComponentProps) {
+  const extensionsNames = editor.extensionManager.extensions.map(ext => ext.name);
+
+  const renderMenuItems = () => [
+    extensionsNames.includes('columns') && !bubbleMenu?.columnConfig?.hidden ? <ColumnsBubbleMenu editor={editor}
+      key="columns"
+    /> : null,
+    extensionsNames.includes('table') && !bubbleMenu?.tableConfig?.hidden ? <TableBubbleMenu editor={editor} items={bubbleMenu?.tableConfig?.items} actions={bubbleMenu?.tableConfig?.actions}
+      key="table"
+    /> : null,
+    extensionsNames.includes('link') && !bubbleMenu?.linkConfig?.hidden ? <BubbleMenuLink disabled={disabled}
+      editor={editor}
+      key="link"
+    /> : null,
+    extensionsNames.includes(Image.name) && !bubbleMenu?.imageConfig?.hidden ? <BubbleMenuImage disabled={disabled}
+      editor={editor}
+      key="image"
+    /> : null,
+    extensionsNames.includes(ImageGif.name) && !bubbleMenu?.imageGifConfig?.hidden ? <BubbleMenuImageGif disabled={disabled}
+      editor={editor}
+      key="imageGif"
+    /> : null,
+    extensionsNames.includes('video') && !bubbleMenu?.videoConfig?.hidden ? <BubbleMenuVideo disabled={disabled}
+      editor={editor}
+      key="video"
+    /> : null,
+    extensionsNames.includes('katex') && !bubbleMenu?.katexConfig?.hidden ? <BubbleMenuKatex disabled={disabled}
+      editor={editor}
+      key="katex"
+    /> : null,
+    extensionsNames.includes('excalidraw') && !bubbleMenu?.excalidrawConfig?.hidden ? <BubbleMenuExcalidraw disabled={disabled}
+      editor={editor}
+      key="excalidraw"
+    /> : null,
+    extensionsNames.includes('mermaid') && !bubbleMenu?.mermaidConfig?.hidden ? <BubbleMenuMermaid disabled={disabled}
+      editor={editor}
+      key="mermaid"
+    /> : null,
+    extensionsNames.includes('iframe') && !bubbleMenu?.iframeConfig?.hidden ? <BubbleMenuIframe disabled={disabled}
+      editor={editor}
+      key="iframe"
+    /> : null,
+    extensionsNames.includes('twitter') && !bubbleMenu?.twitterConfig?.hidden ? <BubbleMenuTwitter disabled={disabled}
+      editor={editor}
+      key="twitter"
+    /> : null,
+    !bubbleMenu?.floatingMenuConfig?.hidden ? <ContentMenu disabled={disabled}
+      editor={editor}
+      key="content"
+    /> : null,
+    !bubbleMenu?.textConfig?.hidden ? <BubbleMenuText disabled={disabled}
+      editor={editor}
+      items={bubbleMenu?.textConfig?.items}
+      key="text"
+    /> : null,
+    extensionsNames.includes('drawer') && !bubbleMenu?.drawerConfig?.hidden ? <BubbleMenuDrawer disabled={disabled}
+      editor={editor}
+      key="drawer"
+    /> : null,
+  ];
+
+  if (bubbleMenu?.render) {
+    return bubbleMenu.render({ editor, disabled: disabled || false, bubbleMenu }, renderMenuItems());
+  }
+
+  return renderMenuItems().filter(Boolean);
+}

package/src/components/CharactorCount.tsx

@@ -0,0 +1,50 @@
+import type { Editor } from '@tiptap/core';
+import React, { useMemo } from 'react';
+import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
+
+interface IPropsCharactorCount {
+  editor: Editor
+  extensions: any
+}
+
+function CharactorCount({ editor, extensions }: IPropsCharactorCount) {
+  const { t } = useLocale();
+
+  const limit = useMemo(() => {
+    return extensions?.find((extension: any) => extension.name === 'base-kit')?.options?.characterCount?.limit;
+  }, [extensions]);
+
+  if (!limit) {
+    return (
+      <div className="flex items-center justify-between p-3 border-t">
+        <div className="flex flex-col">
+          <div className="flex justify-end gap-3 text-sm">
+            <span>
+              {(editor as any).storage.characterCount.characters()}
+              {' '}
+              {t('editor.characters')}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between p-3 border-t">
+      <div className="flex flex-col">
+        <div className="flex justify-end gap-3 text-sm">
+          <span>
+            {editor.storage.characterCount.characters()}
+            /
+            {limit}
+            {' '}
+            {t('editor.characters')}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CharactorCount;

package/src/components/ColorPicker.tsx

@@ -0,0 +1,272 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Plus } from 'lucide-react';
+import { HexColorPicker } from 'react-colorful';
+
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, Separator } from 'reactjs-tiptap-editor-pro/components';
+import { NoFill } from 'reactjs-tiptap-editor-pro/components/icons/NoFill';
+import { COLORS_LIST as DEFAULT_COLORS_LIST } from 'reactjs-tiptap-editor-pro/constants';
+import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
+
+export interface ColorPickerProps {
+  highlight?: boolean
+  disabled?: boolean
+  colors?: string[]
+  defaultColor?: string
+  children: React.ReactNode
+  onChange?: (color: string | undefined) => void
+  setSelectedColor?: (color: string | undefined) => void
+  selectedColor?: string
+}
+
+function ColorPicker(props: ColorPickerProps) {
+  const { t } = useLocale();
+
+  const {
+    highlight = false,
+    disabled = false,
+    selectedColor,
+    setSelectedColor,
+    onChange,
+    colors = DEFAULT_COLORS_LIST,
+  } = props;
+
+  const chunkedColors = useMemo(() => {
+    const colorsArray = colors;
+    const chunked: string[][] = [];
+    for (let i = 0; i < colorsArray.length; i += 10) {
+      chunked.push(colorsArray.slice(i, i + 10));
+    }
+    return chunked;
+  }, [colors]);
+
+  const [recentColorsStore, setRecentColorsStore] = useState<string[]>([]);
+
+  const setRecentColor = (color: string) => {
+    const newRecentColors = [...recentColorsStore];
+    const index = newRecentColors.indexOf(color);
+    if (index !== -1) {
+      newRecentColors.splice(index, 1);
+    }
+    newRecentColors.unshift(color);
+    if (newRecentColors.length > 10) {
+      newRecentColors.pop();
+    }
+    setRecentColorsStore(newRecentColors);
+  };
+
+  function setColor(color: string | undefined) {
+    if (color === undefined) {
+      // clear color
+      setSelectedColor?.(color);
+      onChange?.(color);
+      return;
+    }
+    // check if color is correct
+    const isCorrectColor = /^#([\da-f]{3}){1,2}$/i.test(color);
+    if (isCorrectColor) {
+      setSelectedColor?.(color);
+      onChange?.(color);
+      setRecentColor(color);
+    }
+  }
+
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild
+        className="!p-0"
+        disabled={disabled}
+      >
+        {props?.children}
+      </PopoverTrigger>
+
+      <PopoverContent align="start"
+        className="size-full p-2"
+        hideWhenDetached
+        side="bottom"
+      >
+        <div className="flex flex-col">
+          {highlight
+            ? (
+              <div
+                className="rd-1 flex cursor-pointer items-center gap-[4px] p-1 hover:bg-accent"
+                onClick={() => setColor(undefined)}
+              >
+                <NoFill />
+
+                <span className="ml-1 text-sm">
+                  {t('editor.nofill')}
+                </span>
+              </div>
+            )
+            : (
+              <div
+                className="rd-1 flex cursor-pointer items-center gap-[4px] p-1 hover:bg-accent"
+                onClick={() => {
+                  setColor(undefined);
+                }}
+              >
+                <NoFill />
+
+                <span className="ml-1 text-sm">
+                  {t('editor.default')}
+                </span>
+              </div>
+            )}
+
+          {chunkedColors.map((items: string[], index: number) => {
+            return (
+              <span className="relative flex h-auto w-full p-0 last:pb-2"
+                key={index}
+              >
+                {items.map((item: string, idx) => {
+                  return (
+                    <span
+                      className="inline-block size-6 flex-[0_0_auto] cursor-pointer rounded-sm !border border-transparent p-0.5 hover:border-border hover:shadow-sm"
+                      key={`sub-color-${idx}`}
+                      onClick={() => setColor(item)}
+                    >
+                      <span
+                        className="relative block size-[18px] rounded-[2px] border-transparent"
+                        style={{
+                          backgroundColor: item,
+                        }}
+                      >
+                        {item === selectedColor
+                          ? (
+                            <svg
+                              className="absolute -top-px left-px block size-3"
+                              viewBox="0 0 18 18"
+                              style={{
+                                fill: 'rgb(255, 255, 255)',
+                              }}
+                            >
+                              <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
+                            </svg>
+                          )
+                          : (
+                            <svg
+                              viewBox="0 0 18 18"
+                              style={{
+                                fill: 'rgb(255, 255, 255)',
+                                display: 'none',
+                              }}
+                            >
+                              <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
+                            </svg>
+                          )}
+                      </span>
+                    </span>
+                  );
+                })}
+              </span>
+            );
+          })}
+
+          <div>
+            <div className="my-1 text-sm">
+              {t('editor.recent')}
+            </div>
+
+            <span className="relative flex h-auto w-full p-0 last:pb-2">
+              {recentColorsStore?.map((item, index) => {
+                return (
+                  <span
+                    className="inline-block size-6 flex-[0_0_auto] cursor-pointer rounded-sm !border border-transparent p-0.5 hover:border-border hover:shadow-sm"
+                    key={`sub-color-recent-${index}`}
+                    onClick={() => setColor(item)}
+                  >
+                    <span
+                      className="relative block size-[18px] rounded-[2px] border-transparent"
+                      style={{
+                        backgroundColor: item,
+                      }}
+                    >
+                      <svg
+                        viewBox="0 0 18 18"
+                        style={{
+                          fill: 'rgb(255, 255, 255)',
+                          display: 'none',
+                        }}
+                      >
+                        <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
+                      </svg>
+                    </span>
+                  </span>
+                );
+              })}
+            </span>
+          </div>
+
+          <AddMoreColor setColor={setColor} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface AddMoreColorProps {
+  setColor: (color: string) => void
+}
+
+function AddMoreColor({ setColor }: AddMoreColorProps) {
+  const [colorMore, setColorMore] = useState('#000000');
+  const [openColorMore, setOpenColorMore] = useState(false);
+  const { t } = useLocale();
+
+  useEffect(() => {
+    return () => {
+      setOpenColorMore(false);
+    };
+  }, []);
+
+  return (
+    <Popover open={openColorMore}>
+      <PopoverTrigger asChild>
+        <div
+          className="p-1.5 text-sm hover:cursor-pointer hover:bg-accent"
+          onClick={(e) => {
+            e.preventDefault();
+            setOpenColorMore(true);
+          }}
+        >
+          {t('editor.color.more')}
+          ...
+        </div>
+      </PopoverTrigger>
+
+      <PopoverContent>
+        <div className="flex flex-col items-center justify-center">
+          <HexColorPicker color={colorMore}
+            onChange={setColorMore}
+          />
+
+          <Input
+            className="mt-[8px] w-full"
+            type="text"
+            value={colorMore.slice(1)}
+            onChange={(e) => {
+              e.preventDefault();
+              setColorMore(`#${e.target.value}`);
+            }}
+          />
+        </div>
+
+        <Separator className="my-[10px]" />
+
+        <Button
+          className="w-full"
+          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+            e.preventDefault();
+            setColor(colorMore);
+            setOpenColorMore(false);
+          }}
+        >
+          <Plus size={16} />
+        </Button>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export { ColorPicker };