md-tiptap 0.1.7 → 0.1.8

package/README.md

@@ -142,6 +142,8 @@ function EditorExample() {
 | `disabled` | `boolean` | 否 | `false` | 是否禁用编辑器（只读） |
 | `onChangeDebounceMs` | `number` | 否 | `300` | `onChange` 防抖延迟（毫秒） |
 | `border` | `boolean` | 否 | `true` | 是否显示编辑器容器边框 |
+| `imageMaxSizeBytes` | `number` | 否 | `5242880`（5MB） | 图片上传最大体积（字节），超过则拒绝并提示 |
+| `formulaCategories` | `FormulaPickerCategory[]` | 否 | 内置默认分类 | 公式选择器的分类列表。不传则使用内置分类；传入时可完全自定义或在默认基础上扩展（见下方「扩展公式分类」） |
 
 ### Headless 模式下的工具栏显示
 
@@ -212,6 +214,30 @@ function EditorExample() {
 - **编辑公式**：点击已插入的公式可以打开编辑对话框修改
 - **实时预览**：编辑时实时渲染公式效果
 
+**扩展公式分类**：可通过 `formulaCategories` 自定义或扩展公式选择器中的分类与片段。库会导出 `FORMULA_CATEGORIES`、`FormulaPickerCategory`、`FormulaSnippetItem`，便于在默认基础上追加分类：
+
+```tsx
+import {
+  TiptapEditor,
+  FORMULA_CATEGORIES,
+  type FormulaPickerCategory,
+  type FormulaSnippetItem,
+} from 'md-tiptap'
+import 'md-tiptap/style.css'
+
+const customCategory: FormulaPickerCategory = {
+  id: 'custom',
+  title: '自定义',
+  items: [
+    { id: 'my-1', label: '我的公式', latex: '\\mycommand{x}' },
+  ] as FormulaSnippetItem[],
+}
+
+<TiptapEditor
+  formulaCategories={[...FORMULA_CATEGORIES, customCategory]}
+/>
+```
+
 ### 图片上传
 
 支持两种方式插入图片：

package/dist/components/TiptapEditor/ImageUploadDialog/index.d.ts

@@ -4,6 +4,8 @@ interface ImageUploadDialogProps {
     onConfirm: (src: string, alt?: string) => void;
     onCancel: () => void;
     onUpload?: (file: File) => Promise<string>;
+    /** 图片最大体积（字节），超过则拒绝 */
+    imageMaxSizeBytes?: number;
 }
-declare const ImageUploadDialog: ({ isOpen, onConfirm, onCancel, onUpload }: ImageUploadDialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const ImageUploadDialog: ({ isOpen, onConfirm, onCancel, onUpload, imageMaxSizeBytes, }: ImageUploadDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageUploadDialog;

package/dist/components/TiptapEditor/MathDialog/FormulaPicker/index.d.ts

@@ -0,0 +1,9 @@
+import { type FormulaPickerCategory } from '@/config/formulaCategories';
+import './FormulaPicker.css';
+export type { FormulaPickerCategory } from '@/config/formulaCategories';
+export interface FormulaPickerProps {
+    handlePickSnippet: (latex: string) => void;
+    /** 不传则使用默认 FORMULA_CATEGORIES */
+    categories?: FormulaPickerCategory[];
+}
+export declare function FormulaPicker({ handlePickSnippet, categories }: FormulaPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TiptapEditor/MathDialog/FormulaSnippetButton/index.d.ts

@@ -0,0 +1,12 @@
+export interface FormulaSnippetItem {
+    id: string;
+    label: string;
+    latex: string;
+    previewLatex?: string;
+}
+interface FormulaSnippetButtonProps {
+    item: FormulaSnippetItem;
+    onInsert: (latex: string) => void;
+}
+export declare function FormulaSnippetButton({ item, onInsert }: FormulaSnippetButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TiptapEditor/MathDialog/index.d.ts

@@ -1,10 +1,12 @@
-import './MathDialog.css';
+import type { FormulaPickerCategory } from "@/config/formulaCategories";
+import "./MathDialog.css";
 interface MathDialogProps {
     isOpen: boolean;
     initialValue?: string;
-    type: 'inline' | 'block';
+    type: "inline" | "block";
     onConfirm: (latex: string) => void;
     onCancel: () => void;
+    formulaCategories?: FormulaPickerCategory[];
 }
-declare const MathDialog: ({ isOpen, initialValue, type, onConfirm, onCancel }: MathDialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const MathDialog: ({ isOpen, initialValue, type, onConfirm, onCancel, formulaCategories, }: MathDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default MathDialog;

package/dist/components/TiptapEditor/editorCommands.d.ts

@@ -14,4 +14,5 @@ export declare function unsetHighlight(editor: Editor): void;
 export declare function setHeading(editor: Editor, level: 1 | 2 | 3): void;
 export declare function toggleBulletList(editor: Editor): void;
 export declare function toggleOrderedList(editor: Editor): void;
+export declare function toggleTaskList(editor: Editor): void;
 export declare function insertTable(editor: Editor): void;

package/dist/components/TiptapEditor/extensions/ImageWithDelete.d.ts

@@ -0,0 +1 @@
+export declare const ImageWithDelete: import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>;

package/dist/components/TiptapEditor/index.d.ts

@@ -1,4 +1,4 @@
 import "./TiptapEditor.css";
 import type { TiptapEditorProps } from "./types";
-declare const TiptapEditor: ({ editorMode, headlessToolbarMode, value, onChange, onImageUpload, commandMenuMaxHeight, commandMenuMinHeight, placeholder, disabled, onChangeDebounceMs, border, }: TiptapEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TiptapEditor: ({ editorMode, headlessToolbarMode, value, onChange, onImageUpload, commandMenuMaxHeight, commandMenuMinHeight, placeholder, disabled, onChangeDebounceMs, border, imageMaxSizeBytes, formulaCategories, }: TiptapEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default TiptapEditor;

package/dist/components/TiptapEditor/types.d.ts

@@ -1,3 +1,4 @@
+import type { FormulaPickerCategory } from '@/config/formulaCategories';
 export declare const MenuPlacement: {
     readonly Top: "top";
     readonly Bottom: "bottom";
@@ -69,4 +70,14 @@ export interface TiptapEditorProps {
      * @default 'always'
      */
     headlessToolbarMode?: HeadlessToolbarMode;
+    /**
+     * 图片上传最大体积（字节），超过则拒绝并提示
+     * @default config.IMAGE_MAX_SIZE_BYTES（5MB）
+     */
+    imageMaxSizeBytes?: number;
+    /**
+     * 公式选择器的分类列表。不传则使用默认 FORMULA_CATEGORIES；
+     * 传入时可完全自定义或通过 [...FORMULA_CATEGORIES, ...extra] 扩展默认列表。
+     */
+    formulaCategories?: FormulaPickerCategory[];
 }

package/dist/components/ui/tabs.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): import("react/jsx-runtime").JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/config/formulaCategories.d.ts

@@ -0,0 +1,7 @@
+import type { FormulaSnippetItem } from '@/components/TiptapEditor/MathDialog/FormulaSnippetButton';
+export type FormulaPickerCategory = {
+    id: string;
+    title: string;
+    items: FormulaSnippetItem[];
+};
+export declare const FORMULA_CATEGORIES: FormulaPickerCategory[];

package/dist/config/index.d.ts

@@ -1,7 +1,14 @@
+export interface ColorOption {
+    name: string;
+    value: string;
+}
 export declare const config: {
     COMMAND_MENU_DEFAULT_MAX_HEIGHT: number;
     COMMAND_MENU_DEFAULT_MIN_HEIGHT: number;
     DEFAULT_ON_CHANGE_DEBOUNCE_MS: number;
     DEFAULT_PLACEHOLDER: string;
     PLACEHOLDER_HEADLESS: string;
+    IMAGE_MAX_SIZE_BYTES: number;
+    TEXT_COLORS: ColorOption[];
+    HIGHLIGHT_COLORS: ColorOption[];
 };

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export { useBlockMathDeleteButton } from "./useBlockMathDeleteButton";
 export { useCommandMenu } from "./useCommandMenu";
 export { useMathDialog } from "./useMathDialog";
 export { useImageUploadDialog } from "./useImageUploadDialog";

package/dist/hooks/useBlockMathDeleteButton.d.ts

@@ -0,0 +1,10 @@
+import type { Editor } from "@tiptap/react";
+export interface UseBlockMathDeleteButtonOptions {
+    editor: Editor | null;
+    editorWrapperRef: React.RefObject<HTMLDivElement | null>;
+    disabled: boolean;
+}
+/**
+ * 在块级公式上注入 hover 时显示的删除按钮，点击可删除该公式节点。
+ */
+export declare function useBlockMathDeleteButton({ editor, editorWrapperRef, disabled, }: UseBlockMathDeleteButtonOptions): void;

package/dist/hooks/useEditorCommands.d.ts

@@ -30,6 +30,7 @@ export declare function useEditorCommands(editor: Editor | null, options?: UseEd
         setHeading: (level: 1 | 2 | 3) => void;
         toggleBulletList: () => void;
         toggleOrderedList: () => void;
+        toggleTaskList: () => void;
         insertTable: () => void;
     };
     dialogs: {

package/dist/index.d.ts

@@ -1,3 +1,6 @@
 export { default as TiptapEditor } from "./components/TiptapEditor";
 export type { TiptapEditorProps, EditorMode, HeadlessToolbarMode, } from "./components/TiptapEditor/types";
+export { FORMULA_CATEGORIES } from "./config/formulaCategories";
+export type { FormulaPickerCategory } from "./config/formulaCategories";
+export type { FormulaSnippetItem } from "./components/TiptapEditor/MathDialog/FormulaSnippetButton";
 import "./style.css";

package/dist/lib/utils.d.ts

@@ -1,2 +1,7 @@
 import { type ClassValue } from "clsx";
 export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * 将字节数格式化为带合适单位的字符串（如 300KB、5MB、1.5MB）
+ * 避免小体积用 MB 显示成 0MB
+ */
+export declare function formatFileSize(bytes: number): string;