communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
215 lines • 6.91 kB
TypeScript
/// <reference types="react" />
import { SendBoxStrings } from '../SendBox';
import { AttachmentMetadataInProgress, MessageOptions } from "../../../../acs-ui-common/src";
/**
* Strings of {@link RichTextSendBox} that can be overridden.
*
* @beta
*/
export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {
}
/**
* Options for the rich text editor configuration.
*
* @beta
*/
export interface RichTextEditorOptions {
/**
* Optional callback to handle paste event.
*/
onPaste?: (event: {
content: DocumentFragment;
}) => void;
}
/**
* Strings of RichText that can be overridden.
*
* @beta
*/
export interface RichTextStrings {
/**
* Tooltip text for the bold button.
*/
richTextBoldTooltip: string;
/**
* Tooltip text for the italic button.
*/
richTextItalicTooltip: string;
/**
* Tooltip text for the underline button.
*/
richTextUnderlineTooltip: string;
/**
* Tooltip text for the bullet list button.
*/
richTextBulletListTooltip: string;
/**
* Tooltip text for the number list button.
*/
richTextNumberListTooltip: string;
/**
* Tooltip text for the increase indent button.
*/
richTextIncreaseIndentTooltip: string;
/**
* Tooltip text for the decrease indent button.
*/
richTextDecreaseIndentTooltip: string;
/**
* Tooltip text insert table button.
*/
richTextInsertTableTooltip: string;
/**
* Tooltip text for the rich text format button button.
*/
richTextFormatButtonTooltip: string;
/**
* Text for the insert menu item.
*/
richTextInsertRowOrColumnMenu: string;
/**
* Title for the insert table menu.
*/
richTextInsertTableMenuTitle: string;
/**
* Text for the insert menu item to insert row above the current selection.
*/
richTextInsertRowAboveMenu: string;
/**
* Text for the insert menu item to insert row below the current selection.
*/
richTextInsertRowBelowMenu: string;
/**
* Text for the insert menu item to insert column to the left from the current selection.
*/
richTextInsertColumnLeftMenu: string;
/**
* Text for the insert menu item to insert column to the right from the current selection.
*/
richTextInsertColumnRightMenu: string;
/**
* Text for the delete row or column menu.
*/
richTextDeleteRowOrColumnMenu: string;
/**
* Text for the delete column menu.
*/
richTextDeleteColumnMenu: string;
/**
* Text for the delete row menu.
*/
richTextDeleteRowMenu: string;
/**
* Text for the delete table menu.
*/
richTextDeleteTableMenu: string;
/**
* Text for the rich text toolbar.
*/
richTextToolbarAriaLabel: string;
/**
* Text for the rich text toolbar more button.
*/
richTextToolbarMoreButtonAriaLabel: string;
/**
* Text for announcement when a new bulleted list item is added.
*/
richTextNewBulletedListItemAnnouncement: string;
/**
* Text for announcement when a new numbered list item is added.
*/
richTextNewNumberedListItemAnnouncement: string;
/**
* Text for announcement when the bulleted list style is applied.
*/
richTextBulletedListAppliedAnnouncement: string;
/**
* Text for announcement when the numbered list style is applied.
*/
richTextNumberedListAppliedAnnouncement: string;
/**
* Error message indicating image upload is not complete.
*/
imageUploadsPendingError: string;
}
/**
* Props for {@link RichTextSendBox}.
*
* @beta
*/
export interface RichTextSendBoxProps {
/**
* Optional boolean to disable text box
* @defaultValue false
*/
disabled?: boolean;
/**
* Optional callback to handle paste event.
*/
onPaste?: (event: {
content: DocumentFragment;
}) => void;
/**
* Optional strings to override in component
*/
strings?: Partial<RichTextSendBoxStrings>;
/**
* Optional text for system message above the text box
*/
systemMessage?: string;
/**
* Optional array of type {@link AttachmentMetadataInProgress}
* to render attachments being uploaded in the SendBox.
* @beta
*/
attachments?: AttachmentMetadataInProgress[];
/**
* enumerable to determine if the input box has focus on render or not.
* When undefined nothing has focus on render
*/
autoFocus?: 'sendBoxTextField';
/**
* Optional callback to remove the attachment upload before sending by clicking on
* cancel icon.
*/
onCancelAttachmentUpload?: (attachmentId: string) => void;
/**
* Optional callback invoked after inline image is removed from the UI.
* @param imageAttributes - attributes of the image such as id, src, style, etc.
* It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].
* Note that if the src attribute is a local blob url, it has been revoked at this point.
*/
onRemoveInlineImage?: (imageAttributes: Record<string, string>) => void;
/**
* Callback function used when the send button is clicked.
*/
onSendMessage: (content: string, options?: MessageOptions) => Promise<void>;
/**
* Optional callback called when user is typing
*/
onTyping?: () => Promise<void>;
/**
* Optional callback to handle an inline image that's inserted in the rich text editor.
* When not provided, pasting images into rich text editor will be disabled.
* @param imageAttributes - attributes of the image such as id, src, style, etc.
* It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']
*/
onInsertInlineImage?: (imageAttributes: Record<string, string>) => void;
/**
* Optional Array of type {@link AttachmentMetadataInProgress}
* to render the errorBar for inline images inserted in the RichTextSendBox when:
* - there is an error provided in the inlineImagesWithProgress
* - progress is less than 1 when the send button is clicked
* - content html string is longer than the max allowed length.
* (Note that the id and the url prop of the inlineImagesWithProgress will be used as the id and src attribute of the content html
* when calculating the content length, only for the purpose of displaying the content length overflow error.)
*/
inlineImagesWithProgress?: AttachmentMetadataInProgress[];
}
/**
* A component to render SendBox with Rich Text Editor support.
*
* @beta
*/
export declare const RichTextSendBox: (props: RichTextSendBoxProps) => JSX.Element;
//# sourceMappingURL=RichTextSendBox.d.ts.map