devextreme-react
Version:
DevExtreme React UI and Visualization Components
492 lines (490 loc) • 23.3 kB
TypeScript
/*!
* devextreme-react
* Version: 25.1.6
* Build date: Mon Oct 13 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file in the root of the project for details.
*
* https://github.com/DevExpress/devextreme-react
*/
import * as React from "react";
import { Ref, ReactElement } from "react";
import dxHtmlEditor, { Properties } from "devextreme/ui/html_editor";
import { IHtmlOptions, NestedComponentMeta } from "./core/component";
import type { ContentReadyEvent, DisposingEvent, FocusInEvent, FocusOutEvent, InitializedEvent, ValueChangedEvent, AICommandNameExtended, HtmlEditorImageUploadMode, dxHtmlEditorImageUploadTabItem, HtmlEditorImageUploadTab, dxHtmlEditorTableContextMenuItem, HtmlEditorPredefinedContextMenuItem, HtmlEditorPredefinedToolbarItem, AICommand, AICommandName, AIToolbarItem, dxHtmlEditorToolbarItem } from "devextreme/ui/html_editor";
import type { ContentReadyEvent as FileUploaderContentReadyEvent, DisposingEvent as FileUploaderDisposingEvent, InitializedEvent as FileUploaderInitializedEvent, ValueChangedEvent as FileUploaderValueChangedEvent, BeforeSendEvent, DropZoneEnterEvent, DropZoneLeaveEvent, FilesUploadedEvent, OptionChangedEvent, ProgressEvent, UploadAbortedEvent, UploadedEvent, UploadErrorEvent, UploadStartedEvent, UploadHttpMethod, FileUploadMode, dxFileUploaderOptions } from "devextreme/ui/file_uploader";
import type { ValidationStatus, template, ToolbarItemLocation, ToolbarItemComponent } from "devextreme/common";
import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base";
import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar";
import type { DataSourceOptions } from "devextreme/data/data_source";
import type { Store } from "devextreme/data/store";
import type UploadInfo from "devextreme/file_management/upload_info";
import type DataSource from "devextreme/data/data_source";
type ReplaceFieldTypes<TSource, TReplacement> = {
[P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
};
type IHtmlEditorOptionsNarrowedEvents = {
onContentReady?: ((e: ContentReadyEvent) => void);
onDisposing?: ((e: DisposingEvent) => void);
onFocusIn?: ((e: FocusInEvent) => void);
onFocusOut?: ((e: FocusOutEvent) => void);
onInitialized?: ((e: InitializedEvent) => void);
onValueChanged?: ((e: ValueChangedEvent) => void);
};
type IHtmlEditorOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IHtmlEditorOptionsNarrowedEvents> & IHtmlOptions & {
defaultValue?: any;
onValueChange?: (value: any) => void;
}>;
interface HtmlEditorRef {
instance: () => dxHtmlEditor;
}
declare const HtmlEditor: (props: React.PropsWithChildren<IHtmlEditorOptions> & {
ref?: Ref<HtmlEditorRef>;
}) => ReactElement | null;
type ICommandProps = React.PropsWithChildren<{
name?: AICommandNameExtended;
options?: any;
prompt?: ((param: string) => string);
text?: string;
}>;
declare const Command: ((props: ICommandProps) => React.FunctionComponentElement<React.PropsWithChildren<{
name?: AICommandNameExtended | undefined;
options?: any;
prompt?: ((param: string) => string) | undefined;
text?: string | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IConverterProps = React.PropsWithChildren<{
fromHtml?: ((value: string) => string);
toHtml?: ((value: string) => string);
}>;
declare const Converter: ((props: IConverterProps) => React.FunctionComponentElement<React.PropsWithChildren<{
fromHtml?: ((value: string) => string) | undefined;
toHtml?: ((value: string) => string) | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IFileUploaderOptionsProps = React.PropsWithChildren<{
abortUpload?: ((file: any, uploadInfo?: UploadInfo) => any);
accept?: string;
accessKey?: string | undefined;
activeStateEnabled?: boolean;
allowCanceling?: boolean;
allowedFileExtensions?: Array<string>;
chunkSize?: number;
dialogTrigger?: any | string | undefined;
disabled?: boolean;
dropZone?: any | string | undefined;
elementAttr?: Record<string, any>;
focusStateEnabled?: boolean;
height?: number | string | undefined;
hint?: string | undefined;
hoverStateEnabled?: boolean;
inputAttr?: any;
invalidFileExtensionMessage?: string;
invalidMaxFileSizeMessage?: string;
invalidMinFileSizeMessage?: string;
isDirty?: boolean;
isValid?: boolean;
labelText?: string;
maxFileSize?: number;
minFileSize?: number;
multiple?: boolean;
name?: string;
onBeforeSend?: ((e: BeforeSendEvent) => void);
onContentReady?: ((e: FileUploaderContentReadyEvent) => void);
onDisposing?: ((e: FileUploaderDisposingEvent) => void);
onDropZoneEnter?: ((e: DropZoneEnterEvent) => void);
onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void);
onFilesUploaded?: ((e: FilesUploadedEvent) => void);
onInitialized?: ((e: FileUploaderInitializedEvent) => void);
onOptionChanged?: ((e: OptionChangedEvent) => void);
onProgress?: ((e: ProgressEvent) => void);
onUploadAborted?: ((e: UploadAbortedEvent) => void);
onUploaded?: ((e: UploadedEvent) => void);
onUploadError?: ((e: UploadErrorEvent) => void);
onUploadStarted?: ((e: UploadStartedEvent) => void);
onValueChanged?: ((e: FileUploaderValueChangedEvent) => void);
progress?: number;
readOnly?: boolean;
readyToUploadMessage?: string;
rtlEnabled?: boolean;
selectButtonText?: string;
showFileList?: boolean;
tabIndex?: number;
uploadAbortedMessage?: string;
uploadButtonText?: string;
uploadChunk?: ((file: any, uploadInfo: UploadInfo) => any);
uploadCustomData?: any;
uploadedMessage?: string;
uploadFailedMessage?: string;
uploadFile?: ((file: any, progressCallback: (() => void)) => any);
uploadHeaders?: any;
uploadMethod?: UploadHttpMethod;
uploadMode?: FileUploadMode;
uploadUrl?: string;
validationError?: any;
validationErrors?: Array<any>;
validationStatus?: ValidationStatus;
value?: Array<any>;
visible?: boolean;
width?: number | string | undefined;
defaultValue?: Array<any>;
onValueChange?: (value: Array<any>) => void;
}>;
declare const FileUploaderOptions: ((props: IFileUploaderOptionsProps) => React.FunctionComponentElement<React.PropsWithChildren<{
abortUpload?: ((file: any, uploadInfo?: UploadInfo) => any) | undefined;
accept?: string | undefined;
accessKey?: string | undefined;
activeStateEnabled?: boolean | undefined;
allowCanceling?: boolean | undefined;
allowedFileExtensions?: string[] | undefined;
chunkSize?: number | undefined;
dialogTrigger?: any | string | undefined;
disabled?: boolean | undefined;
dropZone?: any | string | undefined;
elementAttr?: Record<string, any> | undefined;
focusStateEnabled?: boolean | undefined;
height?: number | string | undefined;
hint?: string | undefined;
hoverStateEnabled?: boolean | undefined;
inputAttr?: any;
invalidFileExtensionMessage?: string | undefined;
invalidMaxFileSizeMessage?: string | undefined;
invalidMinFileSizeMessage?: string | undefined;
isDirty?: boolean | undefined;
isValid?: boolean | undefined;
labelText?: string | undefined;
maxFileSize?: number | undefined;
minFileSize?: number | undefined;
multiple?: boolean | undefined;
name?: string | undefined;
onBeforeSend?: ((e: BeforeSendEvent) => void) | undefined;
onContentReady?: ((e: FileUploaderContentReadyEvent) => void) | undefined;
onDisposing?: ((e: FileUploaderDisposingEvent) => void) | undefined;
onDropZoneEnter?: ((e: DropZoneEnterEvent) => void) | undefined;
onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void) | undefined;
onFilesUploaded?: ((e: FilesUploadedEvent) => void) | undefined;
onInitialized?: ((e: FileUploaderInitializedEvent) => void) | undefined;
onOptionChanged?: ((e: OptionChangedEvent) => void) | undefined;
onProgress?: ((e: ProgressEvent) => void) | undefined;
onUploadAborted?: ((e: UploadAbortedEvent) => void) | undefined;
onUploaded?: ((e: UploadedEvent) => void) | undefined;
onUploadError?: ((e: UploadErrorEvent) => void) | undefined;
onUploadStarted?: ((e: UploadStartedEvent) => void) | undefined;
onValueChanged?: ((e: FileUploaderValueChangedEvent) => void) | undefined;
progress?: number | undefined;
readOnly?: boolean | undefined;
readyToUploadMessage?: string | undefined;
rtlEnabled?: boolean | undefined;
selectButtonText?: string | undefined;
showFileList?: boolean | undefined;
tabIndex?: number | undefined;
uploadAbortedMessage?: string | undefined;
uploadButtonText?: string | undefined;
uploadChunk?: ((file: any, uploadInfo: UploadInfo) => any) | undefined;
uploadCustomData?: any;
uploadedMessage?: string | undefined;
uploadFailedMessage?: string | undefined;
uploadFile?: ((file: any, progressCallback: (() => void)) => any) | undefined;
uploadHeaders?: any;
uploadMethod?: UploadHttpMethod | undefined;
uploadMode?: FileUploadMode | undefined;
uploadUrl?: string | undefined;
validationError?: any;
validationErrors?: any[] | undefined;
validationStatus?: ValidationStatus | undefined;
value?: any[] | undefined;
visible?: boolean | undefined;
width?: number | string | undefined;
defaultValue?: any[] | undefined;
onValueChange?: ((value: Array<any>) => void) | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IImageUploadProps = React.PropsWithChildren<{
fileUploaderOptions?: dxFileUploaderOptions;
fileUploadMode?: HtmlEditorImageUploadMode;
tabs?: Array<dxHtmlEditorImageUploadTabItem | HtmlEditorImageUploadTab>;
uploadDirectory?: string | undefined;
uploadUrl?: string | undefined;
}>;
declare const ImageUpload: ((props: IImageUploadProps) => React.FunctionComponentElement<React.PropsWithChildren<{
fileUploaderOptions?: dxFileUploaderOptions | undefined;
fileUploadMode?: HtmlEditorImageUploadMode | undefined;
tabs?: (dxHtmlEditorImageUploadTabItem | HtmlEditorImageUploadTab)[] | undefined;
uploadDirectory?: string | undefined;
uploadUrl?: string | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IItemProps = React.PropsWithChildren<{
beginGroup?: boolean;
closeMenuOnClick?: boolean;
disabled?: boolean;
icon?: string;
items?: Array<dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem>;
name?: HtmlEditorPredefinedContextMenuItem | undefined | HtmlEditorPredefinedToolbarItem | string;
selectable?: boolean;
selected?: boolean;
template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template;
text?: string;
visible?: boolean;
acceptedValues?: Array<boolean | number | string>;
commands?: Array<AICommand | AICommandName>;
cssClass?: string | undefined;
html?: string;
locateInMenu?: LocateInMenuMode;
location?: ToolbarItemLocation;
menuItemTemplate?: (() => string | any) | template;
options?: any;
showText?: ShowTextMode;
widget?: ToolbarItemComponent;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
menuItemRender?: (...params: any) => React.ReactNode;
menuItemComponent?: React.ComponentType<any>;
}>;
declare const Item: ((props: IItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
beginGroup?: boolean | undefined;
closeMenuOnClick?: boolean | undefined;
disabled?: boolean | undefined;
icon?: string | undefined;
items?: (dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem)[] | undefined;
name?: HtmlEditorPredefinedContextMenuItem | undefined | HtmlEditorPredefinedToolbarItem | string;
selectable?: boolean | undefined;
selected?: boolean | undefined;
template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | undefined;
text?: string | undefined;
visible?: boolean | undefined;
acceptedValues?: (string | number | boolean)[] | undefined;
commands?: (AICommandName | AICommand)[] | undefined;
cssClass?: string | undefined;
html?: string | undefined;
locateInMenu?: LocateInMenuMode | undefined;
location?: ToolbarItemLocation | undefined;
menuItemTemplate?: template | (() => string | any) | undefined;
options?: any;
showText?: ShowTextMode | undefined;
widget?: ToolbarItemComponent | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
menuItemRender?: ((...params: any) => React.ReactNode) | undefined;
menuItemComponent?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IMediaResizingProps = React.PropsWithChildren<{
allowedTargets?: Array<string>;
enabled?: boolean;
}>;
declare const MediaResizing: ((props: IMediaResizingProps) => React.FunctionComponentElement<React.PropsWithChildren<{
allowedTargets?: string[] | undefined;
enabled?: boolean | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IMentionProps = React.PropsWithChildren<{
dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
displayExpr?: ((item: any) => string) | string;
itemTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
marker?: string;
minSearchLength?: number;
searchExpr?: Array<(() => any) | string> | (() => any) | string;
searchTimeout?: number;
template?: ((mentionData: {
id: string | number;
marker: string;
value: any;
}, contentElement: any) => string | any) | template;
valueExpr?: (() => void) | string;
itemRender?: (...params: any) => React.ReactNode;
itemComponent?: React.ComponentType<any>;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
}>;
declare const Mention: ((props: IMentionProps) => React.FunctionComponentElement<React.PropsWithChildren<{
dataSource?: string | any[] | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null | undefined;
displayExpr?: string | ((item: any) => string) | undefined;
itemTemplate?: template | ((itemData: any, itemIndex: number, itemElement: any) => string | any) | undefined;
marker?: string | undefined;
minSearchLength?: number | undefined;
searchExpr?: string | (string | (() => any))[] | (() => any) | undefined;
searchTimeout?: number | undefined;
template?: template | ((mentionData: {
id: string | number;
marker: string;
value: any;
}, contentElement: any) => string | any) | undefined;
valueExpr?: string | (() => void) | undefined;
itemRender?: ((...params: any) => React.ReactNode) | undefined;
itemComponent?: React.ComponentType<any> | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITabProps = React.PropsWithChildren<{
name?: HtmlEditorImageUploadTab | undefined;
}>;
declare const Tab: ((props: ITabProps) => React.FunctionComponentElement<React.PropsWithChildren<{
name?: HtmlEditorImageUploadTab | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITableContextMenuProps = React.PropsWithChildren<{
enabled?: boolean;
items?: Array<dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem>;
}>;
declare const TableContextMenu: ((props: ITableContextMenuProps) => React.FunctionComponentElement<React.PropsWithChildren<{
enabled?: boolean | undefined;
items?: (dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem)[] | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITableContextMenuItemProps = React.PropsWithChildren<{
beginGroup?: boolean;
closeMenuOnClick?: boolean;
disabled?: boolean;
icon?: string;
items?: Array<dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem>;
name?: HtmlEditorPredefinedContextMenuItem | undefined;
selectable?: boolean;
selected?: boolean;
template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template;
text?: string;
visible?: boolean;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
}>;
declare const TableContextMenuItem: ((props: ITableContextMenuItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
beginGroup?: boolean | undefined;
closeMenuOnClick?: boolean | undefined;
disabled?: boolean | undefined;
icon?: string | undefined;
items?: (dxHtmlEditorTableContextMenuItem | HtmlEditorPredefinedContextMenuItem)[] | undefined;
name?: HtmlEditorPredefinedContextMenuItem | undefined;
selectable?: boolean | undefined;
selected?: boolean | undefined;
template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | undefined;
text?: string | undefined;
visible?: boolean | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITableResizingProps = React.PropsWithChildren<{
enabled?: boolean;
minColumnWidth?: number;
minRowHeight?: number;
}>;
declare const TableResizing: ((props: ITableResizingProps) => React.FunctionComponentElement<React.PropsWithChildren<{
enabled?: boolean | undefined;
minColumnWidth?: number | undefined;
minRowHeight?: number | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IToolbarProps = React.PropsWithChildren<{
container?: any | string;
items?: Array<AIToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem>;
multiline?: boolean;
}>;
declare const Toolbar: ((props: IToolbarProps) => React.FunctionComponentElement<React.PropsWithChildren<{
container?: any | string;
items?: (HtmlEditorPredefinedToolbarItem | AIToolbarItem | dxHtmlEditorToolbarItem)[] | undefined;
multiline?: boolean | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IToolbarItemProps = React.PropsWithChildren<{
acceptedValues?: Array<boolean | number | string>;
commands?: Array<AICommand | AICommandName>;
cssClass?: string | undefined;
disabled?: boolean;
html?: string;
locateInMenu?: LocateInMenuMode;
location?: ToolbarItemLocation;
menuItemTemplate?: (() => string | any) | template;
name?: HtmlEditorPredefinedToolbarItem | string | string;
options?: any;
showText?: ShowTextMode;
template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template;
text?: string;
visible?: boolean;
widget?: ToolbarItemComponent;
menuItemRender?: (...params: any) => React.ReactNode;
menuItemComponent?: React.ComponentType<any>;
render?: (...params: any) => React.ReactNode;
component?: React.ComponentType<any>;
}>;
declare const ToolbarItem: ((props: IToolbarItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
acceptedValues?: (string | number | boolean)[] | undefined;
commands?: (AICommandName | AICommand)[] | undefined;
cssClass?: string | undefined;
disabled?: boolean | undefined;
html?: string | undefined;
locateInMenu?: LocateInMenuMode | undefined;
location?: ToolbarItemLocation | undefined;
menuItemTemplate?: template | (() => string | any) | undefined;
name?: string | undefined;
options?: any;
showText?: ShowTextMode | undefined;
template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | undefined;
text?: string | undefined;
visible?: boolean | undefined;
widget?: ToolbarItemComponent | undefined;
menuItemRender?: ((...params: any) => React.ReactNode) | undefined;
menuItemComponent?: React.ComponentType<any> | undefined;
render?: ((...params: any) => React.ReactNode) | undefined;
component?: React.ComponentType<any> | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IVariablesProps = React.PropsWithChildren<{
dataSource?: Array<string> | DataSource | DataSourceOptions | null | Store | string;
escapeChar?: Array<string> | string;
}>;
declare const Variables: ((props: IVariablesProps) => React.FunctionComponentElement<React.PropsWithChildren<{
dataSource?: string | string[] | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null | undefined;
escapeChar?: string | string[] | undefined;
} & {
children?: React.ReactNode;
} & {
elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
export default HtmlEditor;
export { HtmlEditor, IHtmlEditorOptions, HtmlEditorRef, Command, ICommandProps, Converter, IConverterProps, FileUploaderOptions, IFileUploaderOptionsProps, ImageUpload, IImageUploadProps, Item, IItemProps, MediaResizing, IMediaResizingProps, Mention, IMentionProps, Tab, ITabProps, TableContextMenu, ITableContextMenuProps, TableContextMenuItem, ITableContextMenuItemProps, TableResizing, ITableResizingProps, Toolbar, IToolbarProps, ToolbarItem, IToolbarItemProps, Variables, IVariablesProps };
import type * as HtmlEditorTypes from 'devextreme/ui/html_editor_types';
export { HtmlEditorTypes };