tiptap-notion-editor 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +172 -0
- package/lib/NotionEditor.d.ts +58 -0
- package/lib/components/Draggable/index.d.ts +5 -0
- package/lib/components/ToggleButton.d.ts +16 -0
- package/lib/components/TooltipWrapper.d.ts +9 -0
- package/lib/components/blocks/attachment.d.ts +2 -0
- package/lib/components/blocks/code.d.ts +2 -0
- package/lib/components/blocks/emoji.d.ts +2 -0
- package/lib/components/blocks/image.d.ts +2 -0
- package/lib/components/blocks/list.d.ts +4 -0
- package/lib/components/blocks/separator.d.ts +2 -0
- package/lib/components/blocks/table.d.ts +2 -0
- package/lib/components/blocks/tableOfContents.d.ts +2 -0
- package/lib/components/blocks/types.d.ts +26 -0
- package/lib/components/blocks/typography.d.ts +8 -0
- package/lib/components/bubble/BubbleMoreOption.d.ts +5 -0
- package/lib/components/bubble/ImageBubbleMenu.d.ts +7 -0
- package/lib/components/bubble/IndentButtons.d.ts +5 -0
- package/lib/components/bubble/MyBubbleMenu.d.ts +5 -0
- package/lib/components/bubble/PickLink.d.ts +6 -0
- package/lib/components/bubble/TextTurnInto.d.ts +5 -0
- package/lib/components/bubble/icon.d.ts +4 -0
- package/lib/components/color/ColorDropdown.d.ts +5 -0
- package/lib/components/color/ColorItem.d.ts +5 -0
- package/lib/components/color/ColorSubMenu.d.ts +7 -0
- package/lib/components/color/HighlightButton.d.ts +15 -0
- package/lib/components/color/TextButton.d.ts +9 -0
- package/lib/components/color/constant.d.ts +12 -0
- package/lib/components/color/icon.d.ts +2 -0
- package/lib/components/color/type.d.ts +9 -0
- package/lib/components/color/utils.d.ts +5 -0
- package/lib/components/extensions/Indent.d.ts +16 -0
- package/lib/components/extensions/emoji-picker/EmojiList.d.ts +8 -0
- package/lib/components/extensions/emoji-picker/EmojiPicker.d.ts +14 -0
- package/lib/components/extensions/emoji-picker/emoji-suggestion.d.ts +3 -0
- package/lib/components/extensions/file-handle.d.ts +19 -0
- package/lib/components/extensions/global-block-background.d.ts +2 -0
- package/lib/components/extensions/index.d.ts +51 -0
- package/lib/components/extensions/mention/MentionList.d.ts +11 -0
- package/lib/components/extensions/mention/mentionSuggestion.d.ts +11 -0
- package/lib/components/extensions/mention/types.d.ts +12 -0
- package/lib/components/extensions/slash-command/MenuListGroup.d.ts +9 -0
- package/lib/components/extensions/slash-command/SlashMenu.d.ts +11 -0
- package/lib/components/extensions/slash-command/items.d.ts +3 -0
- package/lib/components/extensions/slash-command/slash-command.d.ts +7 -0
- package/lib/components/extensions/slash-command/suggestion.d.ts +3 -0
- package/lib/components/icons.d.ts +5 -0
- package/lib/components/node/attachment/AttachmentNode.d.ts +38 -0
- package/lib/components/node/attachment/AttachmentNodeView.d.ts +3 -0
- package/lib/components/node/attachment/AttachmentUploadNode.d.ts +37 -0
- package/lib/components/node/attachment/AttachmentUploadNodeView.d.ts +3 -0
- package/lib/components/node/attachment/context.d.ts +16 -0
- package/lib/components/node/attachment/index.d.ts +3 -0
- package/lib/components/node/image/CustomImage.d.ts +1 -0
- package/lib/components/node/image/ImageNodeView.d.ts +5 -0
- package/lib/components/node/image-upload/drop-zone-content.d.ts +4 -0
- package/lib/components/node/image-upload/hooks.d.ts +7 -0
- package/lib/components/node/image-upload/image-drop-area.d.ts +15 -0
- package/lib/components/node/image-upload/image-preview.d.ts +13 -0
- package/lib/components/node/image-upload/image-upload-node-extension.d.ts +58 -0
- package/lib/components/node/image-upload/image-upload-node-view.d.ts +2 -0
- package/lib/components/node/image-upload/index.d.ts +1 -0
- package/lib/components/node/image-upload/types.d.ts +66 -0
- package/lib/components/node/table-node/AddRowButton.d.ts +5 -0
- package/lib/components/node/table-node/CustomTable.d.ts +1 -0
- package/lib/components/node/table-node/TableAddRowColumnHandle.d.ts +7 -0
- package/lib/components/node/table-node/TableHandle.d.ts +4 -0
- package/lib/components/node/table-node/TableMenuHandle.d.ts +7 -0
- package/lib/components/node/table-node/TableSelectionOverlay.d.ts +7 -0
- package/lib/components/node/table-node/plugins/add-row-plugin.d.ts +9 -0
- package/lib/components/node/table-node/plugins/plugin-keys.d.ts +6 -0
- package/lib/components/node/table-node/plugins/table-menu-handle-plugin.d.ts +33 -0
- package/lib/components/node/table-node/plugins/table-selection-overlay.d.ts +10 -0
- package/lib/components/node/table-node/popover/AlignmentContent.d.ts +4 -0
- package/lib/components/node/table-node/popover/CellMenuPopover.d.ts +4 -0
- package/lib/components/node/table-node/popover/Colors.d.ts +4 -0
- package/lib/components/node/table-node/popover/TableMenuItem.d.ts +11 -0
- package/lib/components/node/table-node/popover/TableMenuPopover.d.ts +9 -0
- package/lib/components/node/table-node/table-kit.d.ts +2 -0
- package/lib/components/node/table-node/utils/getActiveTableCellAlignment.d.ts +14 -0
- package/lib/components/node/table-node/utils/getTableColumnMeta.d.ts +15 -0
- package/lib/components/node/table-node/utils/getTableContext.d.ts +16 -0
- package/lib/components/node/table-node/utils/index.d.ts +17 -0
- package/lib/components/node/table-node/utils/table.d.ts +51 -0
- package/lib/components/node/toc-node/TableOfContentsNode.d.ts +13 -0
- package/lib/components/node/toc-node/TocNodeView.d.ts +9 -0
- package/lib/components/toc-sidebar/TocPopover.d.ts +6 -0
- package/lib/components/toc-sidebar/TocSidebar.d.ts +9 -0
- package/lib/components/toc-sidebar/TocSidebarContent.d.ts +6 -0
- package/lib/components/toc-sidebar/TocUIList.d.ts +8 -0
- package/lib/components/ui/button.d.ts +10 -0
- package/lib/components/ui/command.d.ts +18 -0
- package/lib/components/ui/dialog.d.ts +17 -0
- package/lib/components/ui/dropdown-menu.d.ts +29 -0
- package/lib/components/ui/input-group.d.ts +16 -0
- package/lib/components/ui/input.d.ts +3 -0
- package/lib/components/ui/popover.d.ts +10 -0
- package/lib/components/ui/scroll-area.d.ts +5 -0
- package/lib/components/ui/separator.d.ts +4 -0
- package/lib/components/ui/textarea.d.ts +3 -0
- package/lib/components/ui/tooltip.d.ts +7 -0
- package/lib/i18n/context.d.ts +15 -0
- package/lib/i18n/index.d.ts +2 -0
- package/lib/i18n/messages.d.ts +202 -0
- package/lib/index.cjs +9 -0
- package/lib/index.cjs.map +1 -0
- package/lib/index.d.ts +15 -0
- package/lib/index.js +5188 -0
- package/lib/index.js.map +1 -0
- package/lib/lib/aspect-ratio.d.ts +21 -0
- package/lib/lib/collect-file-urls.d.ts +10 -0
- package/lib/lib/tiptap-utils.d.ts +173 -0
- package/lib/lib/use-event.d.ts +1 -0
- package/lib/lib/utils.d.ts +25 -0
- package/lib/styles/colors.css +88 -0
- package/lib/styles/editor.css +268 -0
- package/lib/styles/image-upload.css +256 -0
- package/lib/styles/image.css +113 -0
- package/lib/styles/index.css +18 -0
- package/lib/styles/prosemirror.css +271 -0
- package/lib/styles/table.css +243 -0
- package/lib/styles/tokens.css +66 -0
- package/package.json +114 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/** Một mục hiển thị trong dropdown `@mention`. */
|
|
2
|
+
export type MentionItem = {
|
|
3
|
+
/** Giá trị được ghi vào document — thường là id người dùng. */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Chuỗi hiển thị trong dropdown và trong nội dung. */
|
|
6
|
+
label: string;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Nguồn dữ liệu cho `@mention`. App chủ tự quyết gọi API hay lọc danh sách
|
|
10
|
+
* có sẵn; package không giả định gì về backend.
|
|
11
|
+
*/
|
|
12
|
+
export type MentionSource = (query: string) => MentionItem[] | Promise<MentionItem[]>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { BlockGroupItem, BlockItem } from '../../blocks/types';
|
|
2
|
+
interface CommandListItemsProps {
|
|
3
|
+
groups: BlockGroupItem[];
|
|
4
|
+
flatCommands: BlockItem[];
|
|
5
|
+
selectedIndex: number;
|
|
6
|
+
onSelectIndex: (index: number) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const MenuListGroup: ({ groups, flatCommands, selectedIndex, onSelectIndex, }: CommandListItemsProps) => import("react").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Editor, Range } from '@tiptap/core';
|
|
2
|
+
import { BlockGroupItem, BlockItem } from '../../blocks/types';
|
|
3
|
+
type CommandListProps = {
|
|
4
|
+
items: BlockGroupItem[];
|
|
5
|
+
command: (item: BlockItem) => void;
|
|
6
|
+
editor: Editor;
|
|
7
|
+
range: Range;
|
|
8
|
+
query: string;
|
|
9
|
+
};
|
|
10
|
+
declare const SlashMenu: import('react').ForwardRefExoticComponent<CommandListProps & import('react').RefAttributes<unknown>>;
|
|
11
|
+
export default SlashMenu;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { SuggestionOptions } from '@tiptap/suggestion';
|
|
2
|
+
import { Extension } from '@tiptap/core';
|
|
3
|
+
export type SlashCommandOptions = {
|
|
4
|
+
suggestion: Omit<SuggestionOptions, 'editor'>;
|
|
5
|
+
};
|
|
6
|
+
declare const SlashCommand: Extension<SlashCommandOptions, any>;
|
|
7
|
+
export { SlashCommand };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const InsertLeftColumn: (props: any) => import("react").JSX.Element;
|
|
2
|
+
export declare const InsertRightColumn: (props: any) => import("react").JSX.Element;
|
|
3
|
+
export declare const InsertRowAbove: (props: any) => import("react").JSX.Element;
|
|
4
|
+
export declare const InsertRowBelow: (props: any) => import("react").JSX.Element;
|
|
5
|
+
export declare const TableMergeIcon: (props: any) => import("react").JSX.Element;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { Node } from '@tiptap/core';
|
|
2
|
+
export type AttachmentAttributes = {
|
|
3
|
+
/**
|
|
4
|
+
* Id do storage của app chủ cấp, dùng khi tệp không có URL cố định.
|
|
5
|
+
*
|
|
6
|
+
* Storage riêng tư thường chỉ phát URL ngắn hạn, nên nhúng URL vào nội dung
|
|
7
|
+
* là bảo đảm nó hỏng sau vài phút. Lưu id rồi hỏi app chủ lúc người dùng bấm
|
|
8
|
+
* tải — xem prop `onOpenAttachment`.
|
|
9
|
+
*/
|
|
10
|
+
fileId: string | null;
|
|
11
|
+
/** URL công khai, dùng khi app chủ lưu ở storage công khai. */
|
|
12
|
+
src: string | null;
|
|
13
|
+
/** Tên hiển thị. Thường là tên file gốc. */
|
|
14
|
+
name: string | null;
|
|
15
|
+
/** Kích thước tính bằng byte, để hiển thị. Không có thì bỏ dòng đó. */
|
|
16
|
+
size: number | null;
|
|
17
|
+
/** MIME type, dùng để chọn biểu tượng. */
|
|
18
|
+
mime: string | null;
|
|
19
|
+
};
|
|
20
|
+
declare module "@tiptap/core" {
|
|
21
|
+
interface Commands<ReturnType> {
|
|
22
|
+
attachment: {
|
|
23
|
+
/** Chèn một file đã có URL vào document. */
|
|
24
|
+
setAttachment: (attrs: Partial<AttachmentAttributes>) => ReturnType;
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Khối file đính kèm: Word, PDF, bảng tính, zip…
|
|
30
|
+
*
|
|
31
|
+
* Node chỉ giữ URL và vài thông tin để hiển thị. Việc đưa file lên R2 là của
|
|
32
|
+
* app chủ — package nhận URL đã có, đúng như ảnh.
|
|
33
|
+
*
|
|
34
|
+
* Ảnh có node riêng (`image`) vì nó hiển thị nội dung trực tiếp; file thường
|
|
35
|
+
* chỉ có thể hiện thành một thẻ để tải về, nên tách node cho rõ.
|
|
36
|
+
*/
|
|
37
|
+
export declare const AttachmentNode: Node<any, any>;
|
|
38
|
+
export default AttachmentNode;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Node } from '@tiptap/react';
|
|
2
|
+
/**
|
|
3
|
+
* Kết quả tải lên một tệp đính kèm.
|
|
4
|
+
*
|
|
5
|
+
* Trả `src` khi storage cấp URL cố định, trả `fileId` khi storage riêng tư
|
|
6
|
+
* chỉ phát URL ngắn hạn — nhúng URL đó vào nội dung là bảo đảm nó hỏng sau vài
|
|
7
|
+
* phút. Trả thẳng một chuỗi được hiểu là `src`, cho tương thích ngược.
|
|
8
|
+
*/
|
|
9
|
+
export type UploadedAttachment = {
|
|
10
|
+
src?: string;
|
|
11
|
+
fileId?: string;
|
|
12
|
+
};
|
|
13
|
+
export type AttachmentUploadFunction = (file: File, onProgress?: (event: {
|
|
14
|
+
progress: number;
|
|
15
|
+
}) => void, signal?: AbortSignal) => Promise<string | UploadedAttachment>;
|
|
16
|
+
export interface AttachmentUploadNodeOptions {
|
|
17
|
+
/** Loại file được nhận. Mặc định mọi loại. */
|
|
18
|
+
accept?: string;
|
|
19
|
+
/** Số file tối đa mỗi lần. */
|
|
20
|
+
limit?: number;
|
|
21
|
+
/** Dung lượng tối đa mỗi file, tính bằng byte. */
|
|
22
|
+
maxSize?: number;
|
|
23
|
+
/**
|
|
24
|
+
* Hàm đưa file lên và trả về URL công khai. App chủ cung cấp — package không
|
|
25
|
+
* tự gọi storage nào.
|
|
26
|
+
*/
|
|
27
|
+
upload?: AttachmentUploadFunction;
|
|
28
|
+
onError?: (error: Error) => void;
|
|
29
|
+
onSuccess?: (url: string) => void;
|
|
30
|
+
HTMLAttributes: Record<string, unknown>;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Ô trống chờ chọn file. Upload xong thì tự thay chính nó bằng node
|
|
34
|
+
* `attachment` mang URL trả về.
|
|
35
|
+
*/
|
|
36
|
+
export declare const AttachmentUploadNode: Node<AttachmentUploadNodeOptions, any>;
|
|
37
|
+
export default AttachmentUploadNode;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { AttachmentAttributes } from './AttachmentNode';
|
|
3
|
+
export type AttachmentHandlers = {
|
|
4
|
+
/**
|
|
5
|
+
* Mở một tệp không có URL công khai.
|
|
6
|
+
*
|
|
7
|
+
* Node view chạy ngoài cây props của NotionEditor nên handler đi qua context.
|
|
8
|
+
* Package không biết storage nào cả — nó đưa lại đúng thuộc tính đã lưu và
|
|
9
|
+
* để app chủ quyết định lấy nội dung ra sao.
|
|
10
|
+
*/
|
|
11
|
+
onOpenAttachment?: (attachment: AttachmentAttributes) => void;
|
|
12
|
+
};
|
|
13
|
+
export declare const AttachmentHandlersProvider: ({ onOpenAttachment, children, }: AttachmentHandlers & {
|
|
14
|
+
children: ReactNode;
|
|
15
|
+
}) => import("react").JSX.Element;
|
|
16
|
+
export declare const useAttachmentHandlers: () => AttachmentHandlers;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { AttachmentNode, type AttachmentAttributes } from './AttachmentNode';
|
|
2
|
+
export { AttachmentUploadNode, type AttachmentUploadFunction, type AttachmentUploadNodeOptions, type UploadedAttachment, } from './AttachmentUploadNode';
|
|
3
|
+
export { AttachmentHandlersProvider, type AttachmentHandlers, } from './context';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const CustomImage: import('@tiptap/core').Node<import('@tiptap/extension-image').ImageOptions, any>;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { NodeViewProps } from '@tiptap/react';
|
|
3
|
+
export declare const IMAGE_MAX_WIDTH = 600;
|
|
4
|
+
export declare const IMAGE_MAX_HEIGHT = 400;
|
|
5
|
+
export default function ImageNodeView({ node, editor, updateAttributes, getPos, }: NodeViewProps): React.JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FileItem, UploadOptions } from './types';
|
|
2
|
+
export declare function useFileUpload(options: UploadOptions): {
|
|
3
|
+
fileItems: FileItem[];
|
|
4
|
+
uploadFiles: (files: File[]) => Promise<string[]>;
|
|
5
|
+
removeFileItem: (fileId: string) => void;
|
|
6
|
+
clearAllFiles: () => void;
|
|
7
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
interface ImageUploadDragAreaProps {
|
|
2
|
+
/**
|
|
3
|
+
* Callback function triggered when files are dropped or selected
|
|
4
|
+
* @param {File[]} files - Array of File objects that were dropped or selected
|
|
5
|
+
*/
|
|
6
|
+
onFile: (files: File[]) => void;
|
|
7
|
+
/**
|
|
8
|
+
* Optional child elements to render inside the drag area
|
|
9
|
+
* @optional
|
|
10
|
+
* @default undefined
|
|
11
|
+
*/
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
export declare const ImageUploadDragArea: React.FC<ImageUploadDragAreaProps>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FileItem } from './types';
|
|
2
|
+
interface ImageUploadPreviewProps {
|
|
3
|
+
/**
|
|
4
|
+
* The file item to preview
|
|
5
|
+
*/
|
|
6
|
+
fileItem: FileItem;
|
|
7
|
+
/**
|
|
8
|
+
* Callback to remove this file from upload queue
|
|
9
|
+
*/
|
|
10
|
+
onRemove: () => void;
|
|
11
|
+
}
|
|
12
|
+
export declare const ImageUploadPreview: React.FC<ImageUploadPreviewProps>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { Node } from '@tiptap/react';
|
|
2
|
+
import { NodeType } from '@tiptap/pm/model';
|
|
3
|
+
export type UploadFunction = (file: File, onProgress?: (event: {
|
|
4
|
+
progress: number;
|
|
5
|
+
}) => void, abortSignal?: AbortSignal) => Promise<string>;
|
|
6
|
+
export interface ImageUploadNodeOptions {
|
|
7
|
+
/**
|
|
8
|
+
* The type of the node.
|
|
9
|
+
* @default 'image'
|
|
10
|
+
*/
|
|
11
|
+
type?: string | NodeType | undefined;
|
|
12
|
+
/**
|
|
13
|
+
* Acceptable file types for upload.
|
|
14
|
+
* @default 'image/*'
|
|
15
|
+
*/
|
|
16
|
+
accept?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Maximum number of files that can be uploaded.
|
|
19
|
+
* @default 1
|
|
20
|
+
*/
|
|
21
|
+
limit?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Maximum file size in bytes (0 for unlimited).
|
|
24
|
+
* @default 0
|
|
25
|
+
*/
|
|
26
|
+
maxSize?: number;
|
|
27
|
+
/**
|
|
28
|
+
* Function to handle the upload process.
|
|
29
|
+
*/
|
|
30
|
+
upload?: UploadFunction;
|
|
31
|
+
/**
|
|
32
|
+
* Callback for upload errors.
|
|
33
|
+
*/
|
|
34
|
+
onError?: (error: Error) => void;
|
|
35
|
+
/**
|
|
36
|
+
* Callback for successful uploads.
|
|
37
|
+
*/
|
|
38
|
+
onSuccess?: (url: string) => void;
|
|
39
|
+
/**
|
|
40
|
+
* HTML attributes to add to the image element.
|
|
41
|
+
* @default {}
|
|
42
|
+
* @example { class: 'foo' }
|
|
43
|
+
*/
|
|
44
|
+
HTMLAttributes: Record<string, unknown>;
|
|
45
|
+
}
|
|
46
|
+
declare module "@tiptap/react" {
|
|
47
|
+
interface Commands<ReturnType> {
|
|
48
|
+
imageUpload: {
|
|
49
|
+
setImageUploadNode: (options?: ImageUploadNodeOptions) => ReturnType;
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* A Tiptap node extension that creates an image upload component.
|
|
55
|
+
* @see registry/tiptap-node/image-upload-node/image-upload-node
|
|
56
|
+
*/
|
|
57
|
+
export declare const ImageUploadNode: Node<ImageUploadNodeOptions, any>;
|
|
58
|
+
export default ImageUploadNode;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '../image-upload/image-upload-node-extension';
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
export interface FileItem {
|
|
2
|
+
/**
|
|
3
|
+
* Unique identifier for the file item
|
|
4
|
+
*/
|
|
5
|
+
id: string;
|
|
6
|
+
/**
|
|
7
|
+
* The actual File object being uploaded
|
|
8
|
+
*/
|
|
9
|
+
file: File;
|
|
10
|
+
/**
|
|
11
|
+
* Current upload progress as a percentage (0-100)
|
|
12
|
+
*/
|
|
13
|
+
progress: number;
|
|
14
|
+
/**
|
|
15
|
+
* Current status of the file upload process
|
|
16
|
+
* @default "uploading"
|
|
17
|
+
*/
|
|
18
|
+
status: "uploading" | "success" | "error";
|
|
19
|
+
/**
|
|
20
|
+
* URL to the uploaded file, available after successful upload
|
|
21
|
+
* @optional
|
|
22
|
+
*/
|
|
23
|
+
url?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Controller that can be used to abort the upload process
|
|
26
|
+
* @optional
|
|
27
|
+
*/
|
|
28
|
+
abortController?: AbortController;
|
|
29
|
+
}
|
|
30
|
+
export interface UploadOptions {
|
|
31
|
+
/**
|
|
32
|
+
* Maximum allowed file size in bytes
|
|
33
|
+
*/
|
|
34
|
+
maxSize: number;
|
|
35
|
+
/**
|
|
36
|
+
* Maximum number of files that can be uploaded
|
|
37
|
+
*/
|
|
38
|
+
limit: number;
|
|
39
|
+
/**
|
|
40
|
+
* String specifying acceptable file types (MIME types or extensions)
|
|
41
|
+
* @example ".jpg,.png,image/jpeg" or "image/*"
|
|
42
|
+
*/
|
|
43
|
+
accept: string;
|
|
44
|
+
/**
|
|
45
|
+
* Function that handles the actual file upload process
|
|
46
|
+
* @param {File} file - The file to be uploaded
|
|
47
|
+
* @param {Function} onProgress - Callback function to report upload progress
|
|
48
|
+
* @param {AbortSignal} signal - Signal that can be used to abort the upload
|
|
49
|
+
* @returns {Promise<string>} Promise resolving to the URL of the uploaded file
|
|
50
|
+
*/
|
|
51
|
+
upload: (file: File, onProgress: (event: {
|
|
52
|
+
progress: number;
|
|
53
|
+
}) => void, signal: AbortSignal) => Promise<string>;
|
|
54
|
+
/**
|
|
55
|
+
* Callback triggered when a file is uploaded successfully
|
|
56
|
+
* @param {string} url - URL of the successfully uploaded file
|
|
57
|
+
* @optional
|
|
58
|
+
*/
|
|
59
|
+
onSuccess?: (url: string) => void;
|
|
60
|
+
/**
|
|
61
|
+
* Callback triggered when an error occurs during upload
|
|
62
|
+
* @param {Error} error - The error that occurred
|
|
63
|
+
* @optional
|
|
64
|
+
*/
|
|
65
|
+
onError?: (error: Error) => void;
|
|
66
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const CustomTable: import('@tiptap/core').Node<import('@tiptap/extension-table').TableOptions, any>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TableAddRowPluginProps } from './plugins/add-row-plugin';
|
|
2
|
+
export interface TableAddRowColumnHandleProps {
|
|
3
|
+
ref?: React.ForwardedRef<HTMLDivElement>;
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
pluginProps: Omit<TableAddRowPluginProps, "element">;
|
|
6
|
+
}
|
|
7
|
+
export declare const TableAddRowColumnHandle: ({ ref, children, pluginProps, }: TableAddRowColumnHandleProps) => import('react').ReactPortal;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TableMenuHandlePluginProps } from './plugins/table-menu-handle-plugin';
|
|
2
|
+
export interface TableMenuHandleProps {
|
|
3
|
+
ref?: React.ForwardedRef<HTMLDivElement>;
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
pluginProps: Omit<TableMenuHandlePluginProps, "element">;
|
|
6
|
+
}
|
|
7
|
+
export declare const TableMenuHandle: ({ ref, children, pluginProps, }: TableMenuHandleProps) => import('react').ReactPortal;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TableSelectionOverlayPluginProps } from './plugins/table-selection-overlay';
|
|
2
|
+
export interface TableSelectionOverlayProps {
|
|
3
|
+
ref?: React.ForwardedRef<HTMLDivElement>;
|
|
4
|
+
pluginProps: Omit<TableSelectionOverlayPluginProps, "element">;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare function TableSelectionOverlay({ ref, children, pluginProps, }: TableSelectionOverlayProps): import('react').ReactPortal;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Plugin, PluginKey } from '@tiptap/pm/state';
|
|
2
|
+
import { Editor } from '@tiptap/react';
|
|
3
|
+
import { TableControlState } from './plugin-keys';
|
|
4
|
+
export interface TableAddRowPluginProps {
|
|
5
|
+
editor: Editor;
|
|
6
|
+
element: HTMLElement;
|
|
7
|
+
pluginKey: PluginKey<TableControlState>;
|
|
8
|
+
}
|
|
9
|
+
export declare function TableAddRowPlugin({ editor, element, pluginKey, }: TableAddRowPluginProps): Plugin<TableControlState>;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { arrow, autoPlacement, flip, hide, inline, offset, shift, size } from '@floating-ui/dom';
|
|
2
|
+
import { Plugin, PluginKey } from '@tiptap/pm/state';
|
|
3
|
+
import { Editor } from '@tiptap/react';
|
|
4
|
+
interface TableMenuHandlePluginState {
|
|
5
|
+
openedMenu: boolean;
|
|
6
|
+
}
|
|
7
|
+
export interface FloatingUIOptionsProps {
|
|
8
|
+
strategy?: "absolute" | "fixed";
|
|
9
|
+
placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
|
|
10
|
+
offset?: Parameters<typeof offset>[0] | boolean;
|
|
11
|
+
flip?: Parameters<typeof flip>[0] | boolean;
|
|
12
|
+
shift?: Parameters<typeof shift>[0] | boolean;
|
|
13
|
+
arrow?: Parameters<typeof arrow>[0] | false;
|
|
14
|
+
size?: Parameters<typeof size>[0] | boolean;
|
|
15
|
+
autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
|
|
16
|
+
hide?: Parameters<typeof hide>[0] | boolean;
|
|
17
|
+
inline?: Parameters<typeof inline>[0] | boolean;
|
|
18
|
+
onShow?: () => void;
|
|
19
|
+
onHide?: () => void;
|
|
20
|
+
onUpdate?: () => void;
|
|
21
|
+
onDestroy?: () => void;
|
|
22
|
+
}
|
|
23
|
+
export interface TableMenuHandlePluginProps {
|
|
24
|
+
pluginKey: PluginKey<TableMenuHandlePluginState>;
|
|
25
|
+
editor: Editor;
|
|
26
|
+
element: HTMLElement;
|
|
27
|
+
menuType: "row" | "column";
|
|
28
|
+
options?: FloatingUIOptionsProps;
|
|
29
|
+
}
|
|
30
|
+
export declare const rowMenuPluginKey: PluginKey<TableMenuHandlePluginState>;
|
|
31
|
+
export declare const columnMenuPluginKey: PluginKey<TableMenuHandlePluginState>;
|
|
32
|
+
export declare const TableMenuHandlePlugin: ({ pluginKey, editor, element, menuType, options, }: TableMenuHandlePluginProps) => Plugin<TableMenuHandlePluginState>;
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Plugin, PluginKey } from '@tiptap/pm/state';
|
|
2
|
+
import { Editor } from '@tiptap/react';
|
|
3
|
+
import { FloatingUIOptionsProps } from './table-menu-handle-plugin';
|
|
4
|
+
export interface TableSelectionOverlayPluginProps {
|
|
5
|
+
pluginKey: PluginKey;
|
|
6
|
+
editor: Editor;
|
|
7
|
+
element: HTMLElement;
|
|
8
|
+
options?: FloatingUIOptionsProps;
|
|
9
|
+
}
|
|
10
|
+
export declare const TableSelectionOverlayPlugin: ({ pluginKey, editor, element, options, }: TableSelectionOverlayPluginProps) => Plugin<any>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { LucideIcon } from 'lucide-react';
|
|
2
|
+
interface MenuItemProps {
|
|
3
|
+
icon: LucideIcon | any;
|
|
4
|
+
label: string;
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
variant?: "default" | "destructive";
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const TableMenuItem: ({ icon: Icon, label, onClick, variant, disabled, className }: MenuItemProps) => import("react").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Editor } from '@tiptap/core';
|
|
2
|
+
export declare const ITEM_CLASSNAME = "flex items-center gap-2 px-2.5 rounded-md text-sm font-medium transition-colors cursor-pointer w-full";
|
|
3
|
+
interface TableMenuPopoverProps {
|
|
4
|
+
editor: Editor;
|
|
5
|
+
type: "row" | "column";
|
|
6
|
+
pluginKey: any;
|
|
7
|
+
}
|
|
8
|
+
export declare const TableMenuPopover: ({ editor, type, pluginKey, }: TableMenuPopoverProps) => import("react").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Editor } from '@tiptap/core';
|
|
2
|
+
type HorizontalAlign = "left" | "center" | "right" | "justify";
|
|
3
|
+
type VerticalAlign = "top" | "middle" | "bottom";
|
|
4
|
+
interface TableAlignmentState {
|
|
5
|
+
isInsideTable: boolean;
|
|
6
|
+
horizontal: HorizontalAlign;
|
|
7
|
+
vertical: VerticalAlign;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Extracts the active alignment values from the currently selected or focused table cell.
|
|
11
|
+
* Returns defaults if the selection is outside a table structure.
|
|
12
|
+
*/
|
|
13
|
+
export declare const getActiveTableCellAlignment: (editor: Editor | null) => TableAlignmentState;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Editor } from '@tiptap/core';
|
|
2
|
+
interface TableMatrixMeta {
|
|
3
|
+
isInsideTable: boolean;
|
|
4
|
+
currentColumnIndex: number;
|
|
5
|
+
isFirstColumn: boolean;
|
|
6
|
+
isLastColumn: boolean;
|
|
7
|
+
currentRowIndex: number;
|
|
8
|
+
isFirstRow: boolean;
|
|
9
|
+
isLastRow: boolean;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Calculates whether the current column is at the boundaries of the table.
|
|
13
|
+
*/
|
|
14
|
+
export declare const getTableColumnMeta: (editor: Editor | null) => TableMatrixMeta;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { EditorState } from '@tiptap/pm/state';
|
|
2
|
+
import { TableMap } from '@tiptap/pm/tables';
|
|
3
|
+
import { Node as ProsemirrorNode } from '@tiptap/pm/model';
|
|
4
|
+
export interface TableActionContext {
|
|
5
|
+
tableNode: ProsemirrorNode;
|
|
6
|
+
tablePos: number;
|
|
7
|
+
map: TableMap;
|
|
8
|
+
cellPos: number;
|
|
9
|
+
cellRect: {
|
|
10
|
+
top: number;
|
|
11
|
+
bottom: number;
|
|
12
|
+
left: number;
|
|
13
|
+
right: number;
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
export declare const getTableContext: (state: EditorState) => TableActionContext | null;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Editor } from '@tiptap/core';
|
|
2
|
+
/**
|
|
3
|
+
* Checks if any cell in the currently active column contains text content.
|
|
4
|
+
* Used to enable/disable A-Z and Z-A sorting actions.
|
|
5
|
+
*/
|
|
6
|
+
export declare const isCurrentColumnSortable: (editor: Editor | null) => boolean;
|
|
7
|
+
type TableDimension = 'column' | 'row';
|
|
8
|
+
/**
|
|
9
|
+
* Checks if there is any text available inside the active column or row.
|
|
10
|
+
* Returns true if content is found, allowing you to enable "Clear Content" buttons.
|
|
11
|
+
*
|
|
12
|
+
* @param editor The active Tiptap Editor instance.
|
|
13
|
+
* @param dimension The structure to check ('column' | 'row').
|
|
14
|
+
* @returns boolean
|
|
15
|
+
*/
|
|
16
|
+
export declare const hasTableDimensionContent: (editor: Editor | null, dimension: TableDimension) => boolean;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Editor } from '@tiptap/react';
|
|
2
|
+
/**
|
|
3
|
+
* Inserts a blank row at the very bottom of a table without changing selection.
|
|
4
|
+
*/
|
|
5
|
+
export declare function insertRowAtBottom(editor: Editor, tablePos: number, trackHistory?: boolean): boolean;
|
|
6
|
+
/**
|
|
7
|
+
* Deletes the last row of a table if it is completely empty.
|
|
8
|
+
*/
|
|
9
|
+
export declare function deleteEmptyRowFromBottom(editor: Editor, tablePos: number, trackHistory?: boolean): boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Appends a structural blank column at the far right edge of a targeted table pos.
|
|
12
|
+
*/
|
|
13
|
+
export declare function insertColumnAtRight(editor: Editor, tablePos: number, addToHistory?: boolean): boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Removes the column on the far right edge if it contains no content.
|
|
16
|
+
*/
|
|
17
|
+
export declare function deleteEmptyColumnFromRight(editor: Editor, tablePos: number, trackHistory?: boolean): boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Moves the currently active table column left or right.
|
|
20
|
+
*/
|
|
21
|
+
export declare const moveActiveColumn: (editor: Editor, direction: "left" | "right") => boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Moves the currently active table row up or down.
|
|
24
|
+
*/
|
|
25
|
+
export declare const moveActiveRow: (editor: Editor, direction: "up" | "down") => boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Duplicates the active row, copying its structure and contents cleanly.
|
|
28
|
+
*/
|
|
29
|
+
export declare const duplicateActiveRow: (editor: Editor) => boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Duplicates the active column, copying cell nodes down the vertical stack.
|
|
32
|
+
*/
|
|
33
|
+
export declare const duplicateActiveColumn: (editor: Editor) => boolean;
|
|
34
|
+
interface CellStylingOptions {
|
|
35
|
+
backgroundColor?: string;
|
|
36
|
+
textColor?: string;
|
|
37
|
+
}
|
|
38
|
+
export declare const setTableCellStyles: (editor: Editor, options: CellStylingOptions) => boolean;
|
|
39
|
+
type HorizontalAlign = 'left' | 'center' | 'right' | 'justify';
|
|
40
|
+
type VerticalAlign = 'top' | 'middle' | 'bottom';
|
|
41
|
+
interface CellAlignmentOptions {
|
|
42
|
+
horizontal?: HorizontalAlign;
|
|
43
|
+
vertical?: VerticalAlign;
|
|
44
|
+
}
|
|
45
|
+
export declare const setTableCellAlignment: (editor: Editor, options: CellAlignmentOptions) => boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Sorts table rows based on the text properties of the active column.
|
|
48
|
+
* Skips the first row if it consists purely of tableHeaders.
|
|
49
|
+
*/
|
|
50
|
+
export declare const sortActiveColumn: (editor: Editor, order: "asc" | "desc") => boolean;
|
|
51
|
+
export {};
|