reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

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 };

package/src/components/RichTextEditor.tsx

@@ -1,212 +0,0 @@
-import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo } from 'react';
-
-import type { AnyExtension, Editor as CoreEditor } from '@tiptap/core';
-import type { UseEditorOptions } from '@tiptap/react';
-import { EditorContent, useEditor } from '@tiptap/react';
-import { differenceBy, throttle } from 'lodash-es';
-
-import { BubbleMenu, Toolbar, TooltipProvider } from 'reactjs-tiptap-editor-pro/components';
-import CharactorCount from 'reactjs-tiptap-editor-pro/components/CharactorCount';
-import { Toaster } from 'reactjs-tiptap-editor-pro/components/ui/toaster';
-import { EDITOR_UPDATE_WATCH_THROTTLE_WAIT_TIME } from 'reactjs-tiptap-editor-pro/constants';
-import { RESET_CSS } from 'reactjs-tiptap-editor-pro/constants/resetCSS';
-import { editableEditorActions } from 'reactjs-tiptap-editor-pro/store/editableEditor';
-import { ProviderRichText } from 'reactjs-tiptap-editor-pro/store/ProviderRichText';
-import { themeActions } from 'reactjs-tiptap-editor-pro/theme/theme';
-import type { BubbleMenuProps, ToolbarProps } from 'reactjs-tiptap-editor-pro/types';
-import { removeCSS, updateCSS } from 'reactjs-tiptap-editor-pro/utils/dynamicCSS';
-import { hasExtension } from 'reactjs-tiptap-editor-pro/utils/utils';
-
-import '../styles/index.scss';
-
-/**
- * Interface for RichTextEditor component props
- */
-export interface RichTextEditorProps {
-  /** Content of the editor */
-  content: string
-  /** Extensions for the editor */
-  extensions: AnyExtension[]
-
-  /** Output format */
-  output: 'html' | 'json' | 'text'
-  /** Model value */
-  modelValue?: string | object
-  /** Dark mode flag */
-  dark?: boolean
-  /** Dense mode flag */
-  dense?: boolean
-  /** Disabled flag */
-  disabled?: boolean
-  /** Label for the editor */
-  label?: string
-  /** Hide toolbar flag */
-  hideToolbar?: boolean
-  /** Disable bubble menu flag */
-  disableBubble?: boolean
-  /** Hide bubble menu flag */
-  hideBubble?: boolean
-  /** Remove default wrapper flag */
-  removeDefaultWrapper?: boolean
-  /** Maximum width */
-  maxWidth?: string | number
-  /** Minimum height */
-  minHeight?: string | number
-  /** Maximum height */
-  maxHeight?: string | number
-  /** Content class */
-  contentClass?: string | string[] | Record<string, any>
-  /** Content change callback */
-  onChangeContent?: (val: any) => void
-  /** Bubble menu props */
-  bubbleMenu?: BubbleMenuProps
-  /** Toolbar props */
-  toolbar?: ToolbarProps
-
-  /** Use editor options */
-  useEditorOptions?: UseEditorOptions
-
-  /** Use editor options */
-  resetCSS?: boolean
-}
-
-function RichTextEditor(props: RichTextEditorProps, ref: React.ForwardedRef<{ editor: CoreEditor | null }>) {
-  const { content, extensions, useEditorOptions = {} } = props;
-
-  const id = useId();
-
-  const sortExtensions = useMemo(() => {
-    const diff = differenceBy(extensions, extensions, 'name');
-    const exts = extensions.map((k: any) => {
-      const find = extensions.find((ext: any) => ext.name === k.name);
-      if (!find) {
-        return k;
-      }
-      return k.configure(find.options);
-    });
-    return [...exts, ...diff].map((k, i) => k.configure({ sort: i }));
-  }, [extensions]);
-
-  const onValueChange = throttle((editor) => {
-    const output = getOutput(editor, props.output as any);
-
-    props?.onChangeContent?.(output as any);
-  }, EDITOR_UPDATE_WATCH_THROTTLE_WAIT_TIME);
-
-  const editor = useEditor({
-    extensions: sortExtensions,
-    content,
-    onUpdate: ({ editor }) => {
-      if (onValueChange)
-        onValueChange(editor);
-    },
-    ...useEditorOptions,
-  }) as any;
-
-  useImperativeHandle(ref, () => {
-    return {
-      editor,
-    };
-  });
-
-  useEffect(() => {
-    document.documentElement.classList.toggle('dark', props.dark);
-    themeActions.setTheme(id, props.dark ? 'dark' : 'light');
-  }, [props.dark]);
-
-  useEffect(() => {
-    editor?.setEditable(!props?.disabled);
-    editableEditorActions.setDisable(id, !props?.disabled);
-  }, [editor, props?.disabled]);
-
-  useEffect(() => {
-    if (props?.resetCSS !== false) {
-      updateCSS(RESET_CSS, 'react-tiptap-reset');
-    }
-
-    return () => {
-      removeCSS('react-tiptap-reset');
-    };
-  }, [props?.resetCSS]);
-
-  function getOutput(editor: CoreEditor, output: RichTextEditorProps['output']) {
-    if (props?.removeDefaultWrapper) {
-      if (output === 'html') {
-        return editor.isEmpty ? '' : editor.getHTML();
-      }
-      if (output === 'json') {
-        return editor.isEmpty ? {} : editor.getJSON();
-      }
-      if (output === 'text') {
-        return editor.isEmpty ? '' : editor.getText();
-      }
-      return '';
-    }
-
-    if (output === 'html') {
-      return editor.getHTML();
-    }
-    if (output === 'json') {
-      return editor.getJSON();
-    }
-    if (output === 'text') {
-      return editor.getText();
-    }
-    return '';
-  }
-
-  useLayoutEffect(() => {
-    if (editor) editor!.id = id;
-  }, [id, editor]);
-
-  useEffect(() => {
-    return () => {
-      editor?.destroy?.();
-    };
-  }, []);
-
-  const hasExtensionValue = hasExtension(editor, 'characterCount');
-
-  if (!editor) {
-    return <></>;
-  }
-
-  return (
-    <div className="reactjs-tiptap-editor">
-      <ProviderRichText
-        id={id}
-      >
-        <TooltipProvider delayDuration={0}
-          disableHoverableContent
-        >
-          <div className="overflow-hidden rounded-[0.5rem] bg-background">
-            <div className="flex max-h-full w-full flex-col">
-              {!props?.hideToolbar && <Toolbar disabled={!!props?.disabled}
-                editor={editor}
-                toolbar={props.toolbar}
-              />}
-
-              <EditorContent className={`relative ${props?.contentClass || ''}`}
-                editor={editor}
-
-              />
-
-              {hasExtensionValue && <CharactorCount editor={editor}
-                extensions={extensions}
-              />}
-
-              {!props?.hideBubble && <BubbleMenu bubbleMenu={props?.bubbleMenu}
-                disabled={props?.disabled}
-                editor={editor}
-              />}
-            </div>
-          </div>
-        </TooltipProvider>
-      </ProviderRichText>
-
-      <Toaster />
-    </div>
-  );
-}
-
-export default forwardRef(RichTextEditor);

package/src/components/SizeSetter/SizeSetter.tsx

@@ -1,102 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Button, Input, Label, Popover, PopoverContent, PopoverTrigger } from 'reactjs-tiptap-editor-pro/components/ui';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-
-interface ISize {
-  width: number | string, height: number | string 
-}
-
-interface IProps {
-  width: number | string
-  maxWidth?: number | string
-  height: number | string
-  onOk: (arg: ISize) => void
-  children: React.ReactNode
-}
-
-const containerStyle = { padding: '0 12px 12px' };
-
-export const SizeSetter: React.FC<IProps> = ({ width, maxWidth, height, onOk, children }: any) => {
-  const { t } = useLocale();
-
-  const [form, setForm] = useState({
-    width: '',
-    height: '',
-    maxWidth: '',
-  });
-
-  useEffect(() => {
-    setForm({
-      width,
-      height,
-      maxWidth,
-    });
-  }, [height, maxWidth, width]);
-
-  function handleSubmit(event: any) {
-    event.preventDefault();
-    event.stopPropagation();
-    onOk(form);
-  }
-
-  return (
-    <Popover modal>
-      <PopoverTrigger asChild>
-        {children}
-      </PopoverTrigger>
-
-      <PopoverContent>
-        <div style={containerStyle}>
-          <form className="flex flex-col gap-2" onSubmit={handleSubmit}>
-            <Label className="mb-[6px]">
-              Width
-            </Label>
-
-            <div className="flex w-full max-w-sm items-center gap-1.5">
-              <div className="relative items-center w-full max-w-sm">
-                <Input
-                  type="number"
-                  value={form.width}
-                  required
-                  onChange={e => setForm({ ...form, width: e.target.value })}
-                />
-              </div>
-            </div>
-
-            <Label className="mb-[6px]">
-              Max Width
-            </Label>
-
-            <div className="flex w-full max-w-sm items-center gap-1.5">
-              <div className="relative items-center w-full max-w-sm">
-                <Input
-                  type="number"
-                  value={form.maxWidth}
-                  required
-                  onChange={e => setForm({ ...form, maxWidth: e.target.value })}
-                />
-              </div>
-            </div>
-            <Label className="mb-[6px]">
-              Height
-            </Label>
-            <div className="flex w-full max-w-sm items-center gap-1.5">
-              <div className="relative items-center w-full max-w-sm">
-                <Input
-                  type="number"
-                  value={form.height}
-                  required
-                  onChange={e => setForm({ ...form, height: e.target.value })}
-                />
-              </div>
-            </div>
-
-            <Button type="submit" className="self-end mt-2">
-              {t('editor.link.dialog.button.apply')}
-            </Button>
-          </form>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-};

package/src/components/Toolbar.tsx

@@ -1,108 +0,0 @@
-import React, { useMemo } from 'react';
-import type { Editor } from '@tiptap/core';
-import type { ToolbarItemProps, ToolbarProps } from 'reactjs-tiptap-editor-pro/types';
-
-import { Separator } from 'reactjs-tiptap-editor-pro/components';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-import { isFunction } from 'reactjs-tiptap-editor-pro/utils/utils';
-
-export interface ToolbarComponentProps {
-  editor: Editor
-  disabled?: boolean
-  toolbar?: ToolbarProps
-}
-
-function Toolbar({ editor, disabled, toolbar }: ToolbarComponentProps) {
-  const { t, lang } = useLocale();
-
-  const toolbarItems = useMemo(() => {
-    const extensions = [...editor.extensionManager.extensions];
-    const sortExtensions = extensions.sort((arr, acc) => {
-      const a = (arr.options).sort ?? -1;
-      const b = (acc.options).sort ?? -1;
-      return a - b;
-    });
-
-    let menus: ToolbarItemProps[] = [];
-
-    for (const extension of sortExtensions) {
-      const {
-        button,
-        divider = false,
-        spacer = false,
-        toolbar = true,
-      } = extension.options;
-      if (!button || !isFunction(button) || !toolbar) {
-        continue;
-      }
-
-      const _button: ToolbarItemProps['button'] | ToolbarItemProps['button'][] = button({
-        editor,
-        extension,
-        t,
-      });
-
-      if (Array.isArray(_button)) {
-        const menu: ToolbarItemProps[] = _button.map((k, i) => ({
-          button: k,
-          divider: i === _button.length - 1 ? divider : false,
-          spacer: i === 0 ? spacer : false,
-          type: extension.type,
-          name: extension.name,
-        }));
-        menus = [...menus, ...menu];
-        continue;
-      }
-
-      menus.push({
-        button: _button,
-        divider,
-        spacer,
-        type: extension.type,
-        name: extension.name,
-      });
-    }
-    return menus;
-  }, [editor, t, lang]);
-
-  const containerDom = (innerContent: React.ReactNode) => {
-    return (
-      <div
-        className="toolbar px-1 py-2 !border-b"
-        style={{
-          pointerEvents: disabled ? 'none' : 'auto',
-          opacity: disabled ? 0.5 : 1,
-        }}
-      >
-        <div className="relative flex flex-wrap h-auto gap-y-1 gap-x-1">
-          {innerContent}
-        </div>
-      </div>
-    );
-  };
-
-  const dom = toolbarItems.map((item: ToolbarItemProps, key) => {
-    const ButtonComponent = item.button.component;
-
-    return (
-      <div className="flex items-center" key={`toolbar-item-${key}`}>
-        {item?.spacer && <Separator orientation="vertical" className="!h-[16px] !mx-[10px]" />}
-
-        <ButtonComponent
-          {...item.button.componentProps}
-          disabled={disabled || item?.button?.componentProps?.disabled}
-        />
-
-        {item?.divider && <Separator orientation="vertical" className="!h-auto !mx-2" />}
-      </div>
-    );
-  });
-
-  if (toolbar && toolbar?.render) {
-    return toolbar.render({ editor, disabled: disabled || false }, toolbarItems, dom, containerDom);
-  }
-
-  return containerDom(dom);
-}
-
-export { Toolbar };