@progress/kendo-react-editor
Version:
React Editor enables users to create rich text content through a WYSIWYG interface. KendoReact Editor package
497 lines (496 loc) • 13.8 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { ButtonProps } from '@progress/kendo-react-buttons';
import { ColorPickerProps } from '@progress/kendo-react-inputs';
import { PDFExportProps } from '@progress/kendo-react-pdf';
/**
* @hidden
*/
export declare const listsTypes: {
orderedList: string;
bulletList: string;
listItem: string;
};
/**
* Represents a wrapping namespace for the tool settings of the Editor.
*/
export declare namespace EditorToolsSettings {
/**
* The type of the Editor command.
*/
type Command = 'Bold' | 'Italic' | 'Underline' | 'Strikethrough' | 'Subscript' | 'Superscript' | 'Undo' | 'Redo' | 'Link' | 'Unlink' | 'InsertImage' | 'InsertFile' | 'AlignLeft' | 'AlignCenter' | 'AlignRight' | 'AlignJustify' | 'AlignRemove' | 'OrderedList' | 'UnorderedList' | 'Indent' | 'Outdent' | 'SetContent' | 'FontSize' | 'FontName' | 'ForeColor' | 'BackColor' | 'FormatBlock' | 'InsertTable' | 'AddRowBefore' | 'AddRowAfter' | 'AddColumnBefore' | 'AddColumnAfter' | 'DeleteRow' | 'DeleteColumn' | 'DeleteTable' | 'MergeCells' | 'SplitCell' | 'CleanFormatting' | 'Custom';
/**
* The settings of the toolbar tools.
*/
interface ToolSettings {
/**
* The props which will be added to the Button component of the tool.
*/
props: ButtonProps;
/**
* The keys of the messages that are used by the tool.
*/
messages: {
[]: string;
};
/**
* The name of the command that is used by the tool.
*/
commandName?: Command;
}
/**
* The `AlignAction` object.
*/
interface AlignAction {
/**
* The name of the target node.
*/
node: string;
/**
* The styles that will be applied to the target node.
*/
style: Array<{
name: string;
value: string;
}>;
}
/**
* The settings of the Align tool.
*/
interface AlignSettings extends ToolSettings {
/**
* A collection of `AlignAction` objects which defines the behavior of the Align tool.
*/
actions: Array<AlignAction>;
}
/**
* The settings of the Style tool which is presented by a DropDownList component.
*/
interface StyleDropDownListSettings {
/**
* The name of the style which will be added or removed by the Style tool.
*/
style: string;
/**
* The default item of the Style tool.
*/
defaultItem?: {
text: string;
value: string;
localizationKey?: string;
};
/**
* The data items of the Style tool.
*/
items: Array<{
text: string;
value: string;
style?: React.CSSProperties;
}>;
/**
* The name of the command that is used by the Style tool.
*/
commandName?: Command;
}
/**
* The settings of the FormatBlock tool which is presented by a DropDownList.
*/
interface FormatBlockDropDownListSettings {
/**
* The default item of the FormatBlock tool.
*/
defaultItem: {
text: string;
value: string;
localizationKey?: string;
};
/**
* The data items of the FormatBlock tool.
*/
items: Array<{
text: string;
value: string;
style?: React.CSSProperties;
}>;
/**
* The name of the command that is used by the FormatBlock tool.
*/
commandName?: Command;
}
/**
* The inline-formatting options.
*/
interface InlineFormatOptions {
/**
* The mark which will be applied or stripped.
*/
mark: string;
/**
* The additional marks which will be stripped.
*/
altMarks?: Array<string>;
/**
* An object which holds the style that will be stripped by the tool.
*/
altStyle?: {
/**
* The name of the style.
*/
name: string;
/**
* The regular expression which will be matched with the value of the style.
*/
value: RegExp;
};
}
/**
* The settings of the tool which applies inline formatting.
*/
interface InlineFormatSettings extends ToolSettings, InlineFormatOptions {
}
/**
* The settings of the ForeColor and BackColor tools.
*/
interface ApplyColorSettings {
/**
* The applied style by the tool (`color` or `background-color`).
*/
style: string;
/**
* The props of the underlying [KendoReact ColorPicker component](https://www.telerik.com/kendo-react-ui/components/inputs/colorpicker).
*/
colorPickerProps: ColorPickerProps;
/**
* The name of the applied command.
*/
commandName: string;
}
/**
* The setting of the IndentAction tool.
*/
interface IndentAction {
node: string;
style: string;
rtlStyle: string;
step: number;
unit: string;
}
/**
* The settings of the tool which applies indentation.
*/
interface IndentationSettings extends ToolSettings {
actions: Array<IndentAction>;
/**
* The list node types of the Indent and Outdent tools.
*/
listsTypes: {
orderedList: string;
bulletList: string;
listItem: string;
};
}
/**
* The settings of the Link tool or dialog.
*/
interface LinkSettings extends ToolSettings {
mark: string;
linkTarget?: boolean;
}
/**
* The settings of the Unlink tool.
*/
interface UnlinkSettings extends ToolSettings {
mark: string;
}
/**
* The settings of the InsertFile tool or dialog.
*/
interface InsertFileSettings extends LinkSettings {
}
/**
* The settings of the tool which toggles lists.
*/
interface ListSettings extends ToolSettings {
/**
* The list type of the tool.
*/
listType: string;
/**
* The types of the list nodes that are used by the tool.
*/
types: {
orderedList: string;
bulletList: string;
listItem: string;
};
}
/**
* The settings of the InsertTable tool.
*/
interface InsertTableSettings extends ToolSettings {
}
/**
* The settings of the AddRowBefore tool.
*/
interface AddRowBeforeSettings extends ToolSettings {
}
/**
* The settings of the AddRowAfter tool.
*/
interface AddRowAfterSettings extends ToolSettings {
}
/**
* The settings of the AddColumnBefore tool.
*/
interface AddColumnBeforeSettings extends ToolSettings {
}
/**
* The settings of the AddColumnAfter tool.
*/
interface AddColumnAfterSettings extends ToolSettings {
}
/**
* The settings of the DeleteRow tool.
*/
interface DeleteRowSettings extends ToolSettings {
}
/**
* The settings of the DeleteColumn tool.
*/
interface DeleteColumnSettings extends ToolSettings {
}
/**
* The settings of the DeleteTable tool.
*/
interface DeleteTableSettings extends ToolSettings {
}
/**
* The settings of the MergeCells tool.
*/
interface MergeCellsSettings extends ToolSettings {
}
/**
* The settings of the SplitCell tool.
*/
interface SplitCellSettings extends ToolSettings {
}
/**
* The settings of the Print tool.
*/
interface PrintSettings extends ToolSettings {
}
/**
* The settings of the SelectAll tool.
*/
interface SelectAllSettings extends ToolSettings {
}
/**
* The settings of the Pdf tool.
*/
interface PdfSettings extends ToolSettings {
}
/**
* The settings of the CleanFormatting tool.
*/
interface CleanFormattingSettings extends ToolSettings {
}
/**
* The settings of the InsertImage tool or dialog.
*/
interface ImageSettings extends ToolSettings {
node: string;
}
/**
* The settings of the ViewHtml tool or dialog.
*/
interface ViewHtmlSettings extends ToolSettings {
}
/**
* The settings of the Find and Replace tool or dialog.
*/
interface FindReplaceSettings extends ToolSettings {
}
/**
* The object of the Bold tool settings.
*/
const bold: InlineFormatSettings;
/**
* The object of the Italic tool settings.
*/
const italic: InlineFormatSettings;
/**
* The object of the Underline tool settings.
*/
const underline: InlineFormatSettings;
/**
* The object of the Strikethrough tool settings.
*/
const strikethrough: InlineFormatSettings;
/**
* The object of the Subscript tool settings.
*/
const subscript: InlineFormatSettings;
/**
* The object of the Superscript tool settings.
*/
const superscript: InlineFormatSettings;
/**
* The object of the Link tool settings.
*/
const link: LinkSettings;
/**
* The object of the Link tool settings.
*/
const insertFile: InsertFileSettings;
/**
* The object of the InsertTable tool settings.
*/
const insertTable: InsertTableSettings;
/**
* The object of the AddRowBefore tool settings.
*/
const addRowBefore: AddRowBeforeSettings;
/**
* The object of the AddRowAfter tool settings.
*/
const addRowAfter: AddRowAfterSettings;
/**
* The object of the AddColumnBefore tool settings.
*/
const addColumnBefore: AddColumnBeforeSettings;
/**
* The object of the AddColumnAfter tool settings.
*/
const addColumnAfter: AddColumnAfterSettings;
/**
* The object of the DeleteRow tool settings.
*/
const deleteRow: DeleteRowSettings;
/**
* The object of the DeleteColumn tool settings.
*/
const deleteColumn: DeleteColumnSettings;
/**
* The object of the DeleteTable tool settings.
*/
const deleteTable: DeleteTableSettings;
/**
* The object of the MergeCells tool settings.
*/
const mergeCells: MergeCellsSettings;
/**
* The object of the SplitCell tool settings.
*/
const splitCell: SplitCellSettings;
/**
* The object of the Print tool settings.
*/
const print: PrintSettings;
/**
* The object of the Print tool settings.
*/
const selectAll: SelectAllSettings;
/**
* The object of the Print tool settings.
*/
const pdf: PdfSettings;
/**
* The PDF export options.
*
* const savePdfOptions = {
* fileName: 'editor.pdf',
* paperSize: 'A4',
* margin: '1cm'
* };
*/
const savePdfOptions: PDFExportProps;
/**
* The object of the CleanFormatting tool settings.
*/
const cleanFormatting: CleanFormattingSettings;
/**
* The object of the InsertImage tool settings.
*/
const image: ImageSettings;
/**
* The object of the ViewHtml tool settings.
*/
const viewHtml: ViewHtmlSettings;
/**
* The object of the Find and Replace tool settings.
*/
const findAndReplace: FindReplaceSettings;
/**
* The object of the Unlink tool settings.
*/
const unlink: UnlinkSettings;
/**
* The object of the Undo tool settings.
*/
const undo: ToolSettings;
/**
* The object of the Redo tool settings.
*/
const redo: ToolSettings;
/**
* The object of the FontSize tool settings.
*/
const fontSize: StyleDropDownListSettings;
/**
* The object of the FontName tool settings.
*/
const fontName: StyleDropDownListSettings;
/**
* The object of the FormatBlock tool settings.
*/
const formatBlock: FormatBlockDropDownListSettings;
/**
* The object of the ForeColor tool settings.
*/
const foreColor: ApplyColorSettings;
/**
* The object of the BackColor tool settings.
*/
const backColor: ApplyColorSettings;
/**
* The object of the AlignLeft tool settings.
*/
const alignLeft: AlignSettings;
/**
* The object of the AlignRight tool settings.
*/
const alignRight: AlignSettings;
/**
* The object of the AlignCenter tool settings.
*/
const alignCenter: AlignSettings;
/**
* The object of the AlignJustify tool settings.
*/
const alignJustify: AlignSettings;
/**
* The object of the AlignRemove tool settings.
*/
const alignRemove: AlignSettings;
/**
* The object of the Indent tool settings.
*/
const indent: IndentationSettings;
/**
* The object of the Outdent tool settings.
*/
const outdent: IndentationSettings;
/**
* The object of the OrderedList tool settings.
*/
const orderedList: ListSettings;
/**
* The object of the UnorderedList tool settings.
*/
const bulletList: ListSettings;
}