reactjs-tiptap-editor-pro 0.2.31 → 0.2.32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactjs-tiptap-editor-pro",
   "type": "module",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "packageManager": "pnpm@8.15.9",
   "description": "A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React",
   "license": "MIT",
@@ -28,13 +28,64 @@
     "tiptap-react-rc-rich-text"
   ],
   "sideEffects": false,
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "exports": {
-    "./*": "./src/*"
+    ".": {
+      "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/*",
+        "./*"
+      ]
+    }
   },
   "files": [
-    "src",
+    "lib",
     "package.json",
     "README.md",
     "LICENSE"
@@ -171,6 +222,8 @@
     "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

@@ -1,103 +0,0 @@
-/* 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

@@ -1,76 +0,0 @@
-/* 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

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

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

@@ -1,272 +0,0 @@
-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 };