@openim/im-composer 1.0.0 → 1.0.2
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 +1 -1
- package/README.md +214 -203
- package/dist/index.css +1 -518
- package/dist/index.d.mts +617 -0
- package/dist/index.d.ts +487 -276
- package/dist/index.js +24 -2641
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +32 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +129 -82
- package/CHANGELOG.md +0 -37
- package/dist/index.cjs +0 -2603
- package/dist/index.cjs.map +0 -1
- package/dist/index.css.map +0 -1
- package/dist/index.d.cts +0 -406
package/dist/index.d.cts
DELETED
|
@@ -1,406 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
import { DecoratorNode, NodeKey, EditorConfig, DOMExportOutput, DOMConversionMap, Spread, SerializedLexicalNode, LexicalNode, LexicalEditor } from 'lexical';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Attachment type for files added in plain mode
|
|
7
|
-
*/
|
|
8
|
-
type Attachment = {
|
|
9
|
-
/** Unique identifier generated by the component */
|
|
10
|
-
id: string;
|
|
11
|
-
/** Original File object for upload/send */
|
|
12
|
-
file: File;
|
|
13
|
-
/** File name */
|
|
14
|
-
name: string;
|
|
15
|
-
/** File size in bytes */
|
|
16
|
-
size: number;
|
|
17
|
-
/** MIME type */
|
|
18
|
-
mime: string;
|
|
19
|
-
/** Last modified timestamp */
|
|
20
|
-
lastModified?: number;
|
|
21
|
-
/** Preview URL (objectURL) for display */
|
|
22
|
-
previewUrl?: string;
|
|
23
|
-
};
|
|
24
|
-
/**
|
|
25
|
-
* Mention info in the message
|
|
26
|
-
*/
|
|
27
|
-
type MentionInfo = {
|
|
28
|
-
/** User ID of the mentioned member */
|
|
29
|
-
userId: string;
|
|
30
|
-
/** Display name shown in the text */
|
|
31
|
-
display: string;
|
|
32
|
-
/** Start index (UTF-16, inclusive) */
|
|
33
|
-
start: number;
|
|
34
|
-
/** End index (UTF-16, exclusive) */
|
|
35
|
-
end: number;
|
|
36
|
-
};
|
|
37
|
-
/**
|
|
38
|
-
* Quote information
|
|
39
|
-
*/
|
|
40
|
-
type QuoteInfo = {
|
|
41
|
-
/** Title (e.g., "Reply Name:") */
|
|
42
|
-
title: string;
|
|
43
|
-
/** Content of the quote */
|
|
44
|
-
content: string;
|
|
45
|
-
};
|
|
46
|
-
/**
|
|
47
|
-
* Locale/i18n configuration for the composer
|
|
48
|
-
*/
|
|
49
|
-
type IMComposerLocale = {
|
|
50
|
-
/** Link dialog labels */
|
|
51
|
-
linkDialog?: {
|
|
52
|
-
textLabel?: string;
|
|
53
|
-
urlLabel?: string;
|
|
54
|
-
cancelButton?: string;
|
|
55
|
-
insertButton?: string;
|
|
56
|
-
saveButton?: string;
|
|
57
|
-
};
|
|
58
|
-
/** Toolbar button titles */
|
|
59
|
-
toolbar?: {
|
|
60
|
-
bold?: string;
|
|
61
|
-
italic?: string;
|
|
62
|
-
strikethrough?: string;
|
|
63
|
-
code?: string;
|
|
64
|
-
heading1?: string;
|
|
65
|
-
heading2?: string;
|
|
66
|
-
heading3?: string;
|
|
67
|
-
bulletList?: string;
|
|
68
|
-
orderedList?: string;
|
|
69
|
-
quote?: string;
|
|
70
|
-
codeBlock?: string;
|
|
71
|
-
link?: string;
|
|
72
|
-
image?: string;
|
|
73
|
-
};
|
|
74
|
-
};
|
|
75
|
-
/**
|
|
76
|
-
* Payload for plain text mode messages
|
|
77
|
-
*/
|
|
78
|
-
type PlainMessagePayload = {
|
|
79
|
-
type: 'text';
|
|
80
|
-
/** Plain text with @mentions as @{display} */
|
|
81
|
-
plainText: string;
|
|
82
|
-
/** List of mentions with positions */
|
|
83
|
-
mentions: MentionInfo[];
|
|
84
|
-
/** Attached files */
|
|
85
|
-
attachments: Attachment[];
|
|
86
|
-
/** Optional quote message */
|
|
87
|
-
quote?: QuoteInfo;
|
|
88
|
-
};
|
|
89
|
-
/**
|
|
90
|
-
* Payload for rich text (markdown) mode messages
|
|
91
|
-
*/
|
|
92
|
-
type MarkdownMessagePayload = {
|
|
93
|
-
type: 'markdown';
|
|
94
|
-
/** Markdown content */
|
|
95
|
-
markdown: string;
|
|
96
|
-
};
|
|
97
|
-
/**
|
|
98
|
-
* Union type for all message payloads
|
|
99
|
-
*/
|
|
100
|
-
type MessagePayload = PlainMessagePayload | MarkdownMessagePayload;
|
|
101
|
-
/**
|
|
102
|
-
* Member info for mentions
|
|
103
|
-
*/
|
|
104
|
-
type Member = {
|
|
105
|
-
/** Unique user ID */
|
|
106
|
-
userId: string;
|
|
107
|
-
/** Display name */
|
|
108
|
-
display: string;
|
|
109
|
-
/** Optional avatar URL */
|
|
110
|
-
avatarUrl?: string;
|
|
111
|
-
};
|
|
112
|
-
/**
|
|
113
|
-
* Composer mode
|
|
114
|
-
*/
|
|
115
|
-
type ComposerMode = 'plain' | 'rich';
|
|
116
|
-
/**
|
|
117
|
-
* Result from image upload
|
|
118
|
-
*/
|
|
119
|
-
type UploadImageResult = {
|
|
120
|
-
/** URL of the uploaded image (must be https) */
|
|
121
|
-
url: string;
|
|
122
|
-
/** Optional alt text */
|
|
123
|
-
alt?: string;
|
|
124
|
-
};
|
|
125
|
-
/**
|
|
126
|
-
* Image upload function type
|
|
127
|
-
*/
|
|
128
|
-
type UploadImageFn = (file: File) => Promise<UploadImageResult>;
|
|
129
|
-
/**
|
|
130
|
-
* Markdown syntax options
|
|
131
|
-
*/
|
|
132
|
-
type MarkdownSyntaxOptions = {
|
|
133
|
-
heading?: boolean;
|
|
134
|
-
bold?: boolean;
|
|
135
|
-
italic?: boolean;
|
|
136
|
-
strike?: boolean;
|
|
137
|
-
codeInline?: boolean;
|
|
138
|
-
codeBlock?: boolean;
|
|
139
|
-
quote?: boolean;
|
|
140
|
-
list?: boolean;
|
|
141
|
-
link?: boolean;
|
|
142
|
-
image?: boolean;
|
|
143
|
-
};
|
|
144
|
-
/**
|
|
145
|
-
* Keymap send key options
|
|
146
|
-
*/
|
|
147
|
-
type SendKey = 'enter' | 'ctrlEnter' | 'cmdEnter';
|
|
148
|
-
/**
|
|
149
|
-
* Props for IMComposer component
|
|
150
|
-
*/
|
|
151
|
-
type IMComposerProps = {
|
|
152
|
-
/** Controlled mode */
|
|
153
|
-
mode?: ComposerMode;
|
|
154
|
-
/** Default mode for uncontrolled usage */
|
|
155
|
-
defaultMode?: ComposerMode;
|
|
156
|
-
/** Callback when user sends a message */
|
|
157
|
-
onSend?: (payload: PlainMessagePayload | MarkdownMessagePayload) => void;
|
|
158
|
-
/** Enable @mention feature (default: true, plain mode only) */
|
|
159
|
-
enableMention?: boolean;
|
|
160
|
-
/** Async function to search members for mention */
|
|
161
|
-
mentionProvider?: (query: string) => Promise<Member[]>;
|
|
162
|
-
/** Maximum number of mentions allowed (plain mode only) */
|
|
163
|
-
maxMentions?: number;
|
|
164
|
-
/** Custom render function for mention list items in dropdown */
|
|
165
|
-
renderMentionItem?: (props: {
|
|
166
|
-
member: Member;
|
|
167
|
-
isSelected: boolean;
|
|
168
|
-
}) => React.ReactNode;
|
|
169
|
-
/** Enable file attachments (default: true, plain mode only) */
|
|
170
|
-
enableAttachments?: boolean;
|
|
171
|
-
/** Position of attachment preview bar (default: 'bottom') */
|
|
172
|
-
attachmentPreviewPlacement?: 'top' | 'bottom';
|
|
173
|
-
/** Maximum number of attachments (default: 10) */
|
|
174
|
-
maxAttachments?: number;
|
|
175
|
-
/** Allowed MIME types (default: all) */
|
|
176
|
-
allowedMimeTypes?: string[];
|
|
177
|
-
/** Maximum file size in bytes */
|
|
178
|
-
maxFileSize?: number;
|
|
179
|
-
/** Callback when attachment limit is exceeded */
|
|
180
|
-
onAttachmentLimitExceeded?: (reason: 'count' | 'size' | 'mime', file: File) => void;
|
|
181
|
-
/** Callback when attachments change (for external file list rendering) */
|
|
182
|
-
onFilesChange?: (attachments: Attachment[]) => void;
|
|
183
|
-
/** Show built-in attachment preview bar (default: true, set to false for custom UI) */
|
|
184
|
-
showAttachmentPreview?: boolean;
|
|
185
|
-
/** Markdown syntax options */
|
|
186
|
-
markdownOptions?: {
|
|
187
|
-
enabledSyntax?: MarkdownSyntaxOptions;
|
|
188
|
-
};
|
|
189
|
-
/** Image upload function (required for image button in rich mode) */
|
|
190
|
-
uploadImage?: UploadImageFn;
|
|
191
|
-
/** Keymap configuration */
|
|
192
|
-
keymap?: {
|
|
193
|
-
send?: SendKey;
|
|
194
|
-
};
|
|
195
|
-
/** Placeholder text */
|
|
196
|
-
placeholder?: string | {
|
|
197
|
-
plain?: string;
|
|
198
|
-
rich?: string;
|
|
199
|
-
};
|
|
200
|
-
/** Disable the editor */
|
|
201
|
-
disabled?: boolean;
|
|
202
|
-
/** Custom class name */
|
|
203
|
-
className?: string;
|
|
204
|
-
/** Mouse event handler for context menu (right click) */
|
|
205
|
-
onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
|
|
206
|
-
/** Callback when quote is removed (plain mode) */
|
|
207
|
-
onQuoteRemoved?: () => void;
|
|
208
|
-
/** Callback when editor content changes */
|
|
209
|
-
onChange?: () => void;
|
|
210
|
-
/** Locale/i18n configuration */
|
|
211
|
-
locale?: IMComposerLocale;
|
|
212
|
-
};
|
|
213
|
-
/**
|
|
214
|
-
* Methods exposed via ref
|
|
215
|
-
*/
|
|
216
|
-
type IMComposerRef = {
|
|
217
|
-
/** Focus the editor */
|
|
218
|
-
focus: () => void;
|
|
219
|
-
/** Clear editor content and attachments */
|
|
220
|
-
clear: () => void;
|
|
221
|
-
/** Export current payload without sending */
|
|
222
|
-
exportPayload: () => PlainMessagePayload | MarkdownMessagePayload | null;
|
|
223
|
-
/** Import markdown content (rich mode only) */
|
|
224
|
-
importMarkdown: (markdown: string) => void;
|
|
225
|
-
/** Get current attachments (plain mode) */
|
|
226
|
-
getAttachments: () => Attachment[];
|
|
227
|
-
/** Set attachments (plain mode) */
|
|
228
|
-
setAttachments: (attachments: Attachment[]) => void;
|
|
229
|
-
/** Insert a quote message (plain mode) */
|
|
230
|
-
insertQuote: (title: string, content: string) => void;
|
|
231
|
-
/** Add files to attachments (plain mode) */
|
|
232
|
-
addFiles: (files: FileList | File[]) => void;
|
|
233
|
-
/** Remove an attachment by ID (plain mode) */
|
|
234
|
-
removeAttachment: (id: string) => void;
|
|
235
|
-
/** Clear all attachments (plain mode) */
|
|
236
|
-
clearAttachments: () => void;
|
|
237
|
-
/** Insert a mention element (plain mode) */
|
|
238
|
-
insertMention: (userId: string, display: string) => void;
|
|
239
|
-
/** Get complete draft state (editor content + attachments + text, for saving) */
|
|
240
|
-
getDraft: () => {
|
|
241
|
-
editorState: string;
|
|
242
|
-
attachments: Attachment[];
|
|
243
|
-
text: string;
|
|
244
|
-
};
|
|
245
|
-
/** Set complete draft state (restore from saved draft) */
|
|
246
|
-
setDraft: (draft: {
|
|
247
|
-
editorState: string;
|
|
248
|
-
attachments?: Attachment[];
|
|
249
|
-
}) => void;
|
|
250
|
-
/** Set editor content from plain text and optional mentions (plain mode) */
|
|
251
|
-
setText: (text: string, mentions?: Member[]) => void;
|
|
252
|
-
/** Insert text at cursor position (useful for emoji insertion) */
|
|
253
|
-
insertText: (text: string) => void;
|
|
254
|
-
};
|
|
255
|
-
|
|
256
|
-
declare const IMComposer: react.ForwardRefExoticComponent<IMComposerProps & react.RefAttributes<IMComposerRef>>;
|
|
257
|
-
|
|
258
|
-
type SerializedMentionNode = Spread<{
|
|
259
|
-
userId: string;
|
|
260
|
-
display: string;
|
|
261
|
-
}, SerializedLexicalNode>;
|
|
262
|
-
declare class MentionNode extends DecoratorNode<ReactNode> {
|
|
263
|
-
__userId: string;
|
|
264
|
-
__display: string;
|
|
265
|
-
static getType(): string;
|
|
266
|
-
static clone(node: MentionNode): MentionNode;
|
|
267
|
-
constructor(userId: string, display: string, key?: NodeKey);
|
|
268
|
-
createDOM(config: EditorConfig): HTMLElement;
|
|
269
|
-
updateDOM(): boolean;
|
|
270
|
-
exportDOM(): DOMExportOutput;
|
|
271
|
-
static importDOM(): DOMConversionMap | null;
|
|
272
|
-
static importJSON(serializedNode: SerializedMentionNode): MentionNode;
|
|
273
|
-
exportJSON(): SerializedMentionNode;
|
|
274
|
-
getUserId(): string;
|
|
275
|
-
getDisplay(): string;
|
|
276
|
-
getTextContent(): string;
|
|
277
|
-
isIsolated(): boolean;
|
|
278
|
-
isInline(): boolean;
|
|
279
|
-
canInsertTextBefore(): boolean;
|
|
280
|
-
canInsertTextAfter(): boolean;
|
|
281
|
-
decorate(): ReactNode;
|
|
282
|
-
}
|
|
283
|
-
declare function $createMentionNode(userId: string, display: string): MentionNode;
|
|
284
|
-
declare function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode;
|
|
285
|
-
|
|
286
|
-
type SerializedImageNode = Spread<{
|
|
287
|
-
src: string;
|
|
288
|
-
alt: string;
|
|
289
|
-
width?: number;
|
|
290
|
-
height?: number;
|
|
291
|
-
}, SerializedLexicalNode>;
|
|
292
|
-
declare class ImageNode extends DecoratorNode<ReactNode> {
|
|
293
|
-
__src: string;
|
|
294
|
-
__alt: string;
|
|
295
|
-
__width?: number;
|
|
296
|
-
__height?: number;
|
|
297
|
-
static getType(): string;
|
|
298
|
-
static clone(node: ImageNode): ImageNode;
|
|
299
|
-
constructor(src: string, alt: string, width?: number, height?: number, key?: NodeKey);
|
|
300
|
-
createDOM(config: EditorConfig): HTMLElement;
|
|
301
|
-
updateDOM(): boolean;
|
|
302
|
-
exportDOM(editor: LexicalEditor): DOMExportOutput;
|
|
303
|
-
static importDOM(): DOMConversionMap | null;
|
|
304
|
-
static importJSON(serializedNode: SerializedImageNode): ImageNode;
|
|
305
|
-
exportJSON(): SerializedImageNode;
|
|
306
|
-
getSrc(): string;
|
|
307
|
-
getAlt(): string;
|
|
308
|
-
getTextContent(): string;
|
|
309
|
-
isInline(): boolean;
|
|
310
|
-
decorate(): ReactNode;
|
|
311
|
-
}
|
|
312
|
-
declare function $createImageNode(src: string, alt?: string, width?: number, height?: number): ImageNode;
|
|
313
|
-
declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
|
|
314
|
-
|
|
315
|
-
type SerializedEmojiNode = Spread<{
|
|
316
|
-
emoji: string;
|
|
317
|
-
}, SerializedLexicalNode>;
|
|
318
|
-
declare class EmojiNode extends DecoratorNode<ReactNode> {
|
|
319
|
-
__emoji: string;
|
|
320
|
-
static getType(): string;
|
|
321
|
-
static clone(node: EmojiNode): EmojiNode;
|
|
322
|
-
constructor(emoji: string, key?: NodeKey);
|
|
323
|
-
createDOM(config: EditorConfig): HTMLElement;
|
|
324
|
-
updateDOM(): boolean;
|
|
325
|
-
exportDOM(): DOMExportOutput;
|
|
326
|
-
static importDOM(): DOMConversionMap | null;
|
|
327
|
-
static importJSON(serializedNode: SerializedEmojiNode): EmojiNode;
|
|
328
|
-
exportJSON(): SerializedEmojiNode;
|
|
329
|
-
getEmoji(): string;
|
|
330
|
-
getTextContent(): string;
|
|
331
|
-
isIsolated(): boolean;
|
|
332
|
-
isInline(): boolean;
|
|
333
|
-
canInsertTextBefore(): boolean;
|
|
334
|
-
canInsertTextAfter(): boolean;
|
|
335
|
-
decorate(): ReactNode;
|
|
336
|
-
}
|
|
337
|
-
declare function $createEmojiNode(emoji: string): EmojiNode;
|
|
338
|
-
declare function $isEmojiNode(node: LexicalNode | null | undefined): node is EmojiNode;
|
|
339
|
-
|
|
340
|
-
type SerializedQuoteNode = Spread<{
|
|
341
|
-
title: string;
|
|
342
|
-
content: string;
|
|
343
|
-
}, SerializedLexicalNode>;
|
|
344
|
-
declare class QuoteNode extends DecoratorNode<ReactNode> {
|
|
345
|
-
__title: string;
|
|
346
|
-
__content: string;
|
|
347
|
-
static getType(): string;
|
|
348
|
-
static clone(node: QuoteNode): QuoteNode;
|
|
349
|
-
constructor(title: string, content: string, key?: NodeKey);
|
|
350
|
-
createDOM(config: EditorConfig): HTMLElement;
|
|
351
|
-
updateDOM(): boolean;
|
|
352
|
-
exportDOM(): DOMExportOutput;
|
|
353
|
-
static importDOM(): DOMConversionMap | null;
|
|
354
|
-
static importJSON(serializedNode: SerializedQuoteNode): QuoteNode;
|
|
355
|
-
exportJSON(): SerializedQuoteNode;
|
|
356
|
-
getTitle(): string;
|
|
357
|
-
getContent(): string;
|
|
358
|
-
getTextContent(): string;
|
|
359
|
-
isIsolated(): boolean;
|
|
360
|
-
isInline(): boolean;
|
|
361
|
-
decorate(): ReactNode;
|
|
362
|
-
}
|
|
363
|
-
declare function $createQuoteNode(title: string, content: string): QuoteNode;
|
|
364
|
-
declare function $isQuoteNode(node: LexicalNode | null | undefined): node is QuoteNode;
|
|
365
|
-
|
|
366
|
-
interface UseAttachmentsOptions {
|
|
367
|
-
maxAttachments?: number;
|
|
368
|
-
maxFileSize?: number;
|
|
369
|
-
allowedMimeTypes?: string[];
|
|
370
|
-
onLimitExceeded?: (reason: 'count' | 'size' | 'mime', file: File) => void;
|
|
371
|
-
}
|
|
372
|
-
interface UseAttachmentsResult {
|
|
373
|
-
attachments: Attachment[];
|
|
374
|
-
addFiles: (files: FileList | File[]) => void;
|
|
375
|
-
removeAttachment: (id: string) => void;
|
|
376
|
-
clearAttachments: () => void;
|
|
377
|
-
setAttachments: (attachments: Attachment[]) => void;
|
|
378
|
-
}
|
|
379
|
-
declare function useAttachments(options?: UseAttachmentsOptions): UseAttachmentsResult;
|
|
380
|
-
|
|
381
|
-
interface UseImageUploadOptions {
|
|
382
|
-
/** Image upload function */
|
|
383
|
-
uploadImage?: UploadImageFn;
|
|
384
|
-
/** Callback when upload starts */
|
|
385
|
-
onUploadStart?: () => void;
|
|
386
|
-
/** Callback when upload ends */
|
|
387
|
-
onUploadEnd?: () => void;
|
|
388
|
-
/** Callback when error occurs */
|
|
389
|
-
onError?: (error: Error) => void;
|
|
390
|
-
}
|
|
391
|
-
interface UseImageUploadResult {
|
|
392
|
-
/** Whether any upload is in progress */
|
|
393
|
-
isUploading: boolean;
|
|
394
|
-
/** Number of concurrent uploads */
|
|
395
|
-
uploadCount: number;
|
|
396
|
-
/** Upload image and get result */
|
|
397
|
-
upload: (file: File) => Promise<{
|
|
398
|
-
url: string;
|
|
399
|
-
alt?: string;
|
|
400
|
-
} | null>;
|
|
401
|
-
/** Upload image and insert into editor */
|
|
402
|
-
uploadAndInsert: (file: File, editor: LexicalEditor) => Promise<boolean>;
|
|
403
|
-
}
|
|
404
|
-
declare function useImageUpload(options?: UseImageUploadOptions): UseImageUploadResult;
|
|
405
|
-
|
|
406
|
-
export { $createEmojiNode, $createImageNode, $createMentionNode, $createQuoteNode, $isEmojiNode, $isImageNode, $isMentionNode, $isQuoteNode, type Attachment, type ComposerMode, EmojiNode, IMComposer, type IMComposerLocale, type IMComposerProps, type IMComposerRef, ImageNode, type MarkdownMessagePayload, type MarkdownSyntaxOptions, type Member, type MentionInfo, MentionNode, type MessagePayload, type PlainMessagePayload, type QuoteInfo, QuoteNode, type SendKey, type UploadImageFn, type UploadImageResult, useAttachments, useImageUpload };
|