reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

package/src/extensions/FontFamily/FontFamily.ts

@@ -0,0 +1,64 @@
+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 'reactjs-tiptap-editor-pro/utils/utils';
+import { DEFAULT_FONT_FAMILY_LIST } from 'reactjs-tiptap-editor-pro/constants';
+import FontFamilyButton from 'reactjs-tiptap-editor-pro/extensions/FontFamily/components/FontFamilyButton';
+import type { GeneralOptions, NameValueOption } from 'reactjs-tiptap-editor-pro/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

@@ -0,0 +1,97 @@
+import React, { Fragment, useMemo } from 'react';
+
+import {
+  ActionMenuButton,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'reactjs-tiptap-editor-pro/components';
+import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
+import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/FontSize/FontSize.ts

@@ -0,0 +1,119 @@
+import { Extension } from '@tiptap/core';
+
+import FontSizeMenuButton from './components/FontSizeMenuButton';
+import { ensureNameValueOptions } from 'reactjs-tiptap-editor-pro/utils/utils';
+import { DEFAULT_FONT_SIZE_LIST, DEFAULT_FONT_SIZE_VALUE } from 'reactjs-tiptap-editor-pro/constants';
+import type { GeneralOptions, NameValueOption } from 'reactjs-tiptap-editor-pro/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

@@ -0,0 +1,84 @@
+import React, { useMemo, useRef } from 'react';
+
+import {
+  ActionMenuButton,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from 'reactjs-tiptap-editor-pro/components';
+import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
+import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/FormatPainter/FormatPainter.ts

@@ -0,0 +1,121 @@
+/* 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 'reactjs-tiptap-editor-pro/components';
+import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/Heading/Heading.ts

@@ -0,0 +1,57 @@
+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 'reactjs-tiptap-editor-pro/extensions/Heading/components/HeadingButton';
+import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/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

@@ -0,0 +1,96 @@
+import React, { Fragment, useMemo } from 'react';
+
+import {
+  ActionMenuButton,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from 'reactjs-tiptap-editor-pro/components';
+import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/types';
+import { getShortcutKey } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/Highlight/Highlight.ts

@@ -0,0 +1,36 @@
+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 'reactjs-tiptap-editor-pro/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'),
+        },
+      }),
+    };
+  },
+});