reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

package/src/extensions/FontFamily/FontFamily.ts

@@ -1,64 +0,0 @@
-import type { Extension } from '@tiptap/core';
-import type { FontFamilyOptions as TiptapFontFamilyOptions } from '@tiptap/extension-font-family';
-import FontFamilyTiptap from '@tiptap/extension-font-family';
-
-import type { BaseKitOptions } from '../BaseKit';
-import { ensureNameValueOptions } from '@/utils/utils';
-import { DEFAULT_FONT_FAMILY_LIST } from '@/constants';
-import FontFamilyButton from '@/extensions/FontFamily/components/FontFamilyButton';
-import type { GeneralOptions, NameValueOption } from '@/types';
-
-export interface FontFamilyOptions extends TiptapFontFamilyOptions, GeneralOptions<FontFamilyOptions> {
-  /**
-   * Font family list.
-   */
-  fontFamilyList: (string | NameValueOption)[]
-}
-
-export const FontFamily = FontFamilyTiptap.extend<FontFamilyOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      fontFamilyList: DEFAULT_FONT_FAMILY_LIST,
-      button({ editor, extension, t }: any) {
-        const { extensions = [] } = editor.extensionManager ?? [];
-        const fontFamilyList = ensureNameValueOptions(extension?.options?.fontFamilyList || []);
-        const baseKitExt = extensions.find(
-          (k: any) => k.name === 'base-kit',
-        ) as Extension<BaseKitOptions>;
-
-        const items = fontFamilyList.map(font => ({
-          action: () => {
-            editor.chain().focus().setFontFamily(font.value).run();
-          },
-          isActive: () => editor.isActive('textStyle', { fontFamily: font.value }) || false,
-          disabled: !editor.can().setFontFamily(font.value),
-          title: font.name,
-          font: font.value,
-        }));
-
-        if (baseKitExt && baseKitExt.options.textStyle !== false) {
-          items.unshift({
-            action: () => editor.chain().focus().unsetFontFamily().run(),
-            isActive: () => false,
-            disabled: false,
-            font: t('editor.fontFamily.default.tooltip'),
-            title: t('editor.fontFamily.tooltip'),
-          });
-        }
-
-        const disabled = items.filter((k: any) => k.disabled).length === items.length;
-
-        return {
-          component: FontFamilyButton,
-          componentProps: {
-            tooltip: t('editor.fontFamily.tooltip'),
-            disabled,
-            items,
-            editor,
-          },
-        };
-      },
-    };
-  },
-});

package/src/extensions/FontFamily/components/FontFamilyButton.tsx

@@ -1,97 +0,0 @@
-import React, { Fragment, useMemo } from 'react';
-
-import {
-  ActionMenuButton,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components';
-import { useLocale } from '@/locales';
-import type { ButtonViewReturnComponentProps } from '@/types';
-
-export interface Item {
-  title: string
-  icon?: any
-  font?: string
-  isActive: NonNullable<ButtonViewReturnComponentProps['isActive']>
-  action?: ButtonViewReturnComponentProps['action']
-  style?: React.CSSProperties
-  shortcutKeys?: string[]
-  disabled?: boolean
-  divider?: boolean
-  default?: boolean
-}
-
-interface Props {
-  editor: any
-  disabled?: boolean
-  color?: string
-  shortcutKeys?: string[]
-  maxHeight?: string | number
-  tooltip?: string
-  items?: Item[]
-}
-
-function FontFamilyButton(props: Props) {
-  const { t, lang } = useLocale();
-
-  const active = useMemo(() => {
-    const find: any = props?.items?.find((k: any) => k.isActive());
-
-    if (find && !find.default) {
-      return {
-        ...find,
-      };
-    }
-    const item: Item = {
-      title: props.tooltip as any,
-      font: t('editor.fontFamily.default.tooltip'),
-      isActive: () => false,
-      disabled: false,
-      action: () => props.editor.chain().focus().unsetFontFamily().run(),
-    };
-    return item;
-  }, [t, lang, props]);
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild
-        disabled={props?.disabled}
-      >
-        <ActionMenuButton
-          disabled={props?.disabled}
-          icon="MenuDown"
-          title={active?.font?.length > 7 ? `${active?.font?.slice(0, 6)}...` : active?.font}
-          tooltip={props?.tooltip}
-        />
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="w-full">
-        {props?.items?.map((item: any, index) => {
-          const style
-            = item.font === t('editor.fontFamily.default.tooltip') ? {} : { fontFamily: item.font };
-
-          return (
-            <Fragment key={`font-family-${index}`}>
-              <DropdownMenuCheckboxItem checked={active?.font === item.font}
-                onClick={item.action}
-              >
-                <div className="ml-1 h-full"
-                  style={style}
-                >
-                  {item.font}
-                </div>
-              </DropdownMenuCheckboxItem>
-
-              {item.font === t('editor.fontFamily.default.tooltip') && <DropdownMenuSeparator />}
-            </Fragment>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export default FontFamilyButton;

package/src/extensions/FontFamily/index.ts

@@ -1 +0,0 @@
-export * from './FontFamily';

package/src/extensions/FontSize/FontSize.ts

@@ -1,119 +0,0 @@
-import { Extension } from '@tiptap/core';
-
-import FontSizeMenuButton from './components/FontSizeMenuButton';
-import { ensureNameValueOptions } from '@/utils/utils';
-import { DEFAULT_FONT_SIZE_LIST, DEFAULT_FONT_SIZE_VALUE } from '@/constants';
-import type { GeneralOptions, NameValueOption } from '@/types';
-
-/**
- * Represents the interface for font size options, extending GeneralOptions.
- */
-export interface FontSizeOptions extends GeneralOptions<FontSizeOptions> {
-  types: string[]
-  /**
-   * List of available font size values
-   *
-   * @default DEFAULT_FONT_SIZE_LIST
-   */
-  fontSizes: (string | NameValueOption)[]
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    fontSize: {
-      /**
-       * Set the text font size. ex: "12px", "2em", or "small". Must be a valid
-       * CSS font-size
-       * (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size).
-       */
-      setFontSize: (fontSize: string) => ReturnType
-      /**
-       * Unset the font size
-       */
-      unsetFontSize: () => ReturnType
-    }
-  }
-}
-
-export const FontSize = Extension.create<FontSizeOptions>({
-  name: 'fontSize',
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      types: ['textStyle'],
-      fontSizes: [...DEFAULT_FONT_SIZE_LIST],
-      button({ editor, extension, t }) {
-        const fontSizes = ensureNameValueOptions(extension.options?.fontSizes || DEFAULT_FONT_SIZE_VALUE);
-        const defaultFontSize = ensureNameValueOptions([DEFAULT_FONT_SIZE_VALUE])[0];
-        const items = fontSizes.map(k => ({
-          title: k.value === defaultFontSize.value ? t('editor.fontSize.default.tooltip') : String(k.name),
-          isActive: () => {
-            const { fontSize } = editor.getAttributes('textStyle');
-            const isDefault = k.value === defaultFontSize.value;
-            const notFontSize = fontSize === undefined;
-            if (isDefault && notFontSize) {
-              return true;
-            }
-            return editor.isActive({ fontSize: String(k.value) }) || false;
-          },
-          action: () => {
-            if (k.value === defaultFontSize.value) {
-              editor.commands.unsetFontSize();
-              return;
-            }
-            editor.commands.setFontSize(String(k.value));
-          },
-          disabled: !editor.can().setFontSize(String(k.value)),
-          divider: k.value === defaultFontSize.value || false,
-          default: k.value === defaultFontSize.value || false,
-        }));
-        const disabled = items.filter(k => k.disabled).length === items.length;
-        return {
-          component: FontSizeMenuButton,
-          componentProps: {
-            editor,
-            tooltip: t('editor.fontSize.tooltip'),
-            disabled,
-            items,
-            maxHeight: 280,
-          },
-        };
-      },
-    };
-  },
-  addGlobalAttributes() {
-    return [
-      {
-        types: this.options.types,
-        attributes: {
-          fontSize: {
-            default: null,
-            parseHTML: element => element.style.fontSize.replaceAll(/["']+/g, ''),
-            renderHTML: (attributes) => {
-              if (!attributes.fontSize) {
-                return {};
-              }
-              return {
-                style: `font-size: ${attributes.fontSize}`,
-              };
-            },
-          },
-        },
-      },
-    ];
-  },
-  addCommands() {
-    return {
-      setFontSize:
-        fontSize =>
-          ({ chain }) => {
-            return chain().setMark('textStyle', { fontSize }).run();
-          },
-      unsetFontSize:
-        () =>
-          ({ chain }) => {
-            return chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run();
-          },
-    };
-  },
-});

package/src/extensions/FontSize/components/FontSizeMenuButton.tsx

@@ -1,84 +0,0 @@
-import React, { useMemo, useRef } from 'react';
-
-import {
-  ActionMenuButton,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/components';
-import { useLocale } from '@/locales';
-import type { ButtonViewReturnComponentProps } from '@/types';
-
-export interface Item {
-  title: string
-  isActive: NonNullable<ButtonViewReturnComponentProps['isActive']>
-  action?: ButtonViewReturnComponentProps['action']
-  style?: React.CSSProperties
-  disabled?: boolean
-  divider?: boolean
-  default?: boolean
-}
-
-interface IPropsFontSizeMenuButton {
-  editor: any
-  disabled?: boolean
-  color?: string
-  shortcutKeys?: string[]
-  maxHeight?: string | number
-  tooltip?: string
-  items?: Item[]
-}
-
-function FontSizeMenuButton(props: IPropsFontSizeMenuButton) {
-  const { t } = useLocale();
-  const divRef = useRef<HTMLDivElement>(null);
-
-  const active = useMemo(() => {
-    const find: any = (props.items || []).find((k: any) => k.isActive());
-    if (find) {
-      return find;
-    }
-    const item: Item = {
-      title: t('editor.fontSize.default.tooltip'),
-      isActive: () => false,
-    };
-    return item;
-  }, [props]);
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild disabled={props?.disabled}>
-        <div ref={divRef}>
-          <ActionMenuButton
-            disabled={props?.disabled}
-            icon="MenuDown"
-            title={active?.title}
-            tooltip={`${props?.tooltip}`}
-          />
-        </div>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent
-        container={divRef.current as any}
-        className="max-h-[40vh] w-32 overflow-y-auto"
-      >
-        {props?.items?.map((item: any, index) => {
-          return (
-            <DropdownMenuCheckboxItem
-              checked={active.title === item.title}
-              key={`font-size-${index}`}
-              onClick={item.action}
-            >
-              <div className="ml-1 h-full">
-                {item.title}
-              </div>
-            </DropdownMenuCheckboxItem>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export default FontSizeMenuButton;

package/src/extensions/FontSize/index.ts

@@ -1 +0,0 @@
-export * from './FontSize';

package/src/extensions/FormatPainter/FormatPainter.ts

@@ -1,121 +0,0 @@
-/* eslint-disable prefer-const */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { Extension } from '@tiptap/core';
-import type { Mark } from '@tiptap/pm/model';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-
-import { ActionButton } from '@/components';
-import type { GeneralOptions } from '@/types';
-
-/**
- * Represents the interface for font size options, extending GeneralOptions.
- */
-export interface FormatPainterOptions extends GeneralOptions<FormatPainterOptions> {}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    painter: {
-      setPainter: (marks: Mark[]) => ReturnType
-    }
-  }
-}
-
-export interface PainterAction {
-  type: 'start' | 'end'
-  marks: Mark[]
-}
-/**
- * 格式刷
- */
-export const FormatPainter = Extension.create<FormatPainterOptions>({
-  name: 'painter',
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      button: ({ editor, t }) => ({
-        component: ActionButton,
-        componentProps: {
-          action: () => {
-            editor.commands.setPainter(editor?.state.selection.$head.marks() as Mark[]);
-          },
-          icon: 'PaintRoller',
-          tooltip: t('editor.format'),
-        },
-      }),
-    };
-  },
-  addCommands() {
-    return {
-      setPainter:
-        (marks: Mark[]) =>
-          ({
-            view: {
-              dispatch,
-              state: { tr },
-              dom,
-            },
-          }) => {
-            const svgCursor
-            = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M9 22v-6H4V7q0-1.65 1.175-2.825T8 3h12v13h-5v6zM6 10h12V5h-1v4h-2V5h-1v2h-2V5H8q-.825 0-1.412.588T6 7zm0 4h12v-2H6zm0 0v-2z"/></svg>';
-            const encodedSvg = encodeURIComponent(svgCursor);
-            const cursorUrl = `url("data:image/svg+xml;utf8,${encodedSvg}"), auto`;
-
-            dom.style.cursor = cursorUrl;
-            dispatch(tr.setMeta('painterAction', { type: 'start', marks }));
-            return true;
-          },
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        key: new PluginKey('format-painter'),
-        state: {
-          init: () => [] as Mark[],
-          apply: (tr, set) => {
-            const action = tr.getMeta('painterAction') as PainterAction;
-            if (action && action.type === 'start') {
-              set = action.marks;
-            } else if (action && action.type === 'end') {
-              set = [];
-            }
-            return set;
-          },
-        },
-        props: {
-          handleDOMEvents: {
-            mousedown(view) {
-              const marks = this.getState(view.state) as Mark[];
-              if (!marks || marks.length === 0) {
-                view.dom.style.cursor = '';
-                return false; // 如果没有标记，则不执行任何操作
-              }
-              const mouseup = () => {
-                document.removeEventListener('mouseup', mouseup);
-
-                let {
-                  dispatch,
-                  state: { tr, selection },
-                  dom,
-                } = view as any;
-                dom.style.cursor = '';
-
-                tr = tr.removeMark(selection.from, selection.to);
-                for (const mark of marks) {
-                  if (mark.type.name !== 'link') {
-                    tr = tr.addMark(selection.from, selection.to, mark);
-                  }
-                }
-
-                dispatch(tr.setMeta('painterAction', { type: 'end' }));
-              };
-              document.addEventListener('mouseup', mouseup);
-              return true;
-            },
-          },
-        },
-      }),
-    ];
-  },
-});

package/src/extensions/FormatPainter/index.ts

@@ -1 +0,0 @@
-export * from './FormatPainter';

package/src/extensions/Heading/Heading.ts

@@ -1,57 +0,0 @@
-import type { Extension } from '@tiptap/core';
-import type { HeadingOptions as TiptapHeadingOptions } from '@tiptap/extension-heading';
-import { Heading as TiptapHeading } from '@tiptap/extension-heading';
-
-import type { BaseKitOptions } from '../BaseKit';
-import HeadingButton from '@/extensions/Heading/components/HeadingButton';
-import type { GeneralOptions } from '@/types';
-
-export interface HeadingOptions extends TiptapHeadingOptions, GeneralOptions<HeadingOptions> {}
-
-export const Heading = TiptapHeading.extend<HeadingOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      levels: [1, 2, 3, 4, 5, 6],
-      button({ editor, extension, t }) {
-        const { extensions = [] } = editor.extensionManager ?? [];
-        const levels = extension.options?.levels || [];
-        const baseKitExt = extensions.find(
-          k => k.name === 'base-kit',
-        ) as Extension<BaseKitOptions>;
-
-        const items: any[] = levels.map(level => ({
-          action: () => editor.commands.toggleHeading({ level }),
-          isActive: () => editor.isActive('heading', { level }) || false,
-          disabled: !editor.can().toggleHeading({ level }),
-          title: t(`editor.heading.h${level}.tooltip`),
-          level,
-          shortcutKeys: ['alt', 'mod', `${level}`],
-        }));
-
-        if (baseKitExt && baseKitExt.options.paragraph !== false) {
-          items.unshift({
-            action: () => editor.commands.setParagraph(),
-            isActive: () => editor.isActive('paragraph') || false,
-            disabled: !editor.can().setParagraph(),
-            level: 0,
-            title: t('editor.paragraph.tooltip'),
-            shortcutKeys: ['alt', 'mod', '0'],
-          });
-        }
-
-        const disabled = items.filter((k: any) => k.disabled).length === items.length;
-
-        return {
-          component: HeadingButton,
-          componentProps: {
-            tooltip: t('editor.heading.tooltip'),
-            disabled,
-            items,
-            editor,
-          },
-        };
-      },
-    };
-  },
-});

package/src/extensions/Heading/components/HeadingButton.tsx

@@ -1,96 +0,0 @@
-import React, { Fragment, useMemo } from 'react';
-
-import {
-  ActionMenuButton,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from '@/components';
-import type { ButtonViewReturnComponentProps } from '@/types';
-import { getShortcutKey } from '@/utils/plateform';
-
-export interface Item {
-  title: string
-  icon?: any
-  level?: number
-  isActive: NonNullable<ButtonViewReturnComponentProps['isActive']>
-  action?: ButtonViewReturnComponentProps['action']
-  style?: React.CSSProperties
-  shortcutKeys?: string[]
-  disabled?: boolean
-  divider?: boolean
-  default?: boolean
-}
-
-interface Props {
-  editor: any
-  disabled?: boolean
-  color?: string
-  shortcutKeys?: string[]
-  maxHeight?: string | number
-  tooltip?: string
-  items?: Item[]
-}
-
-function HeadingButton(props: Props) {
-  const active = useMemo(() => {
-    const find: any = props?.items?.find((k: any) => k.isActive());
-
-    if (find && !find.default) {
-      return {
-        ...find,
-      };
-    }
-    const item: Item = {
-      title: props.tooltip as any,
-      level: 0,
-      isActive: () => false,
-    };
-    return item;
-  }, [props]);
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild
-        disabled={props?.disabled}
-      >
-        <ActionMenuButton
-          disabled={props?.disabled}
-          icon="MenuDown"
-          title={active?.title}
-          tooltip={props?.tooltip}
-        />
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="w-full">
-        {props?.items?.map((item: any, index) => {
-          return (
-            <Fragment key={`heading-k-${index}`}>
-              <DropdownMenuCheckboxItem
-                checked={active?.title === item.title}
-                onClick={item.action}
-              >
-                <div className={`heading- ml-1 h-full${item.level}`}>
-                  {item.title}
-                </div>
-
-                {!!item?.shortcutKeys?.length && (
-                  <DropdownMenuShortcut className="pl-4">
-                    {item?.shortcutKeys?.map((item: any) => getShortcutKey(item)).join(' ')}
-                  </DropdownMenuShortcut>
-                )}
-              </DropdownMenuCheckboxItem>
-
-              {item.level === 0 && <DropdownMenuSeparator />}
-            </Fragment>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export default HeadingButton;

package/src/extensions/Heading/index.ts

@@ -1 +0,0 @@
-export * from './Heading';

package/src/extensions/Highlight/Highlight.ts

@@ -1,36 +0,0 @@
-import type { HighlightOptions as TiptapHighlightOptions } from '@tiptap/extension-highlight';
-import { Highlight as TiptapHighlight } from '@tiptap/extension-highlight';
-
-import HighlightActionButton from './components/HighlightActionButton';
-import type { GeneralOptions } from '@/types';
-
-export interface HighlightOptions
-  extends TiptapHighlightOptions,
-  GeneralOptions<HighlightOptions> {}
-
-export const Highlight = TiptapHighlight.extend<HighlightOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      multicolor: true,
-      button: ({ editor, t }) => ({
-        component: HighlightActionButton,
-        componentProps: {
-          action: (color?: unknown) => {
-            if (typeof color === 'string') {
-              editor.chain().focus().setHighlight({ color }).run();
-            }
-            if (color === undefined) {
-              editor.chain().focus().unsetHighlight().run();
-            }
-          },
-          editor,
-          isActive: () => editor.isActive('highlight') || false,
-          disabled: !editor.can().setHighlight(),
-          shortcutKeys: ['⇧', 'mod', 'H'],
-          tooltip: t('editor.highlight.tooltip'),
-        },
-      }),
-    };
-  },
-});